v-bind 动态更新html元素上的属性

1. 用于文本插值
2. 动态绑定元素的样式名称class和内联样式style

• 绑定class的几种方式

  1. 对象语法：给v-bind:class设置一个对象，可以动态地切换class

     <div v-bind:class="{ 'active': isActive }"></div>
     <script>
     var app = new Vue({
     el: '#app',
     data: {
         isActive:true
     }
     })
     </script>

     当class的表达式过长或逻辑复杂时，还可以绑定一个计算属性

     <div id="app">
     <div :class="classes"></div>
     </div>
     <script>
     var app = new Vue({
     el: '#app',
     data: {
         isActive: true,
         error:null
     },
     computed: {
         classes: function () {
             return {
                 active: this.isActive && !this.error,
                 'text-fail': this.error && this.error.type === 'fail'
             }
     
         }
     }
     })
     </script>

  2. 数组语法：当需要应用多个class时，给:class绑定一个数组，应用一个class列表

     <div id="app">
     <div :class="[activeCls, errorCls]"></div>
     </div>
     <script>
     var app = new Vue({
     el:'#app',
     data: {
         activeCls: 'active',
         errorCls: 'error'
     }
     })
     </script>

     class有多个条件时，可以在数组语法中使用对象语法

     <div id="app">
     <div :class="[{ 'active': isActive }, errorCls]"></div>
     </div>
     <script>
     var app = new Vue({
     el: '#app',
     data: {
         isActive: true,
         errorCls: 'error'
     }
     })
     </script>

     数组语法也可以使用data,computed和methods三种方法，以计算属性为例：

     <div id="app">
     <button :class="classes"></button>
     </div>
     <script>
     var app = new Vue({
     el: '#app',
     data: {
         size: 'large',
         disabled:true
     },
     computed: {
         classes: function () {
             return [
                 'btn',
                 {
                     ['btn-' + this.size]: this.size !== '',
     
                 }
             ];
         }
     }
     })
     </script>

本作品采用《CC 协议》，转载必须注明作者和本文链接