vue 绑定class、v-bind:style(对象语法、数组语法)

绑定 HTML Class

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

内联样式在模板里

  <div id="div1" :class="{active: isActive, 'text-danger': hasError}"></div>
   <script type="text/javascript">
         var vm1 = new Vue({
             el: "#div1",
             data: {
                 isActive: true,
                 hasError: true,
             }
         })
  </script>

 // 预览
 <div id="div1" class="active text-danger"></div>

内联样式不在模板里

   <div id="div2" :class="class_obj"></div>

     <script type="text/javascript">
         var vm2 = new Vue({
             el: "#div2",
             data: {
                 class_obj: {
                     isActive: true,
                     hasError: true,
                 }
             }
         })
     </script>
 ————————————————
 // 预览
 <div id="div2" class="isActive hasError"></div>

绑定返回对象的计算属性

     <div id="div3" v-bind:class="classObject"></div>

     <script type="text/javascript">
         var vm3 = new Vue({
             el: "#div3",
             data: {
                 isActive: true,
                 error: true
             },
             computed: {
                 classObject: function () {
                     return {
                         active: this.isActive && this.error,
                         'text-danger': this.error
                     }
                 }
             }
         })
     </script>
 ————————————————

 // 预览

 <div id="div3" class="active text-danger"></div> 

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

class 列表

  <div id="div4" v-bind:class="[activeClass, errorClass]"></div>
     <script type="text/javascript">
         new Vue({
             el: "#div4",
             data: {
                 activeClass: 'active',
                 errorClass: 'text-danger'
             }
         })
     </script>
 ————————————————

 // 预览

 <div id="div4" class="active text-danger"></div>

class 列表使用三元表达式

如果你也想根据条件切换列表中的 class，可以用三元表达式：

 <div id="div5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
 <script type="text/javascript">
     new Vue({
         el: "#div5",
         data: {
             isActive: true,
             activeClass: 'active',
             errorClass: 'text-danger'
         }
     })
 </script>
 ————————————————

 // 预览

 <div id="div5" class="active text-danger"></div>

class 列表使用对象语法

  <div id="div6" v-bind:class="[{ active: isActive }, errorClass]"></div>
     <script type="text/javascript">
         new Vue({
             el: "#div6",
             data: {
                 isActive: true,
                 errorClass: 'text-danger'
             }
         })
     </script>
 ————————————————

 // 预览

 <div id="div6" class="active text-danger"></div>

class 综合练习

 <style>
     .red {
       color: red;
     }

     .thin {
       font-weight: ;
     }

     .italic {
       font-style: italic;
     }

     .active {
       letter-spacing: .5em;
     }
   </style>

 <body>
   <div id="app">
     <h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1>

     <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 -->
     <h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1>

     <!-- 在数组中使用三元表达式 -->
     <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1>

     <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
     <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1>

     <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->
     <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>

   </div>

   <script>
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {
         flag: true,
         classObj: { red: true, thin: true, italic: false, active: false }
       },
       methods: {}
     });
   </script>
 </body>

 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

 <div id="div4" v-bind:style="[baseStyles, overridingStyles]">{{ msg }}</div>
 <script type="text/javascript">
     new Vue({
         el: "#div4",
         data: {
             msg: "我是数组绑定方法",
             baseStyles: {
                 color: 'green',
                 fontSize: '30px'
             },
             overridingStyles: {
                 'font-weight': 'bold'
             }
         }
     })
 </script>