Zi 字媒體

Vue Class、Attribute and Style Bindings Vue：2.5 Vue 提供了 v-bind 語法解決設定 DOM 的 Class、Attribute、Style 的問題。 基本使用 v-bind 用法是 v-bind:attribute，也可以省略成 :attribute。 範例 TEST const vm = new Vue({ el: '#app', data: { nameValue: 'Johnson Lu', titleValue: 'This is title' } }); 生成出來的結果會變成： Binding HTML Classes HTML 的 class 通常會與 UI 操作有直接關係，所以會顯得複雜一些，但是一樣可以用 v-bind 解決。 想要根據資料來判斷是否顯示提示視窗就是個常見的案例。 Object Syntax 範例 TEST const vm = new Vue({ el: '#app', data: { isActive: false, hasError: true } }); 生成出來的結果會變成： 除了指定之外，也可以直接使用物件的方式操作。 TEST const vm = new Vue({ el: '#app', data: { classObj: { active: false, 'text-danger': true } } }); Array Syntax 範例 TEST const vm = new Vue({ el: '#app', data: { active: false, 'text-danger': true } }); 也可以透過 v-bind 做一些簡易判斷。 TEST Categories: Vue Tags: javascriptVue 分類 Android AngularJS Chrome Database MySQL DataStructure Editor Vim Firefox Git Hadoop Language Go Java JavaScript jQuery jQueryChart Node.js Vue PHP Laravel ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS HTML Wordpress Search 搜尋：