之前学到的指令 v-bind 在用于绑定class和style时,表达式结果可以是字符串、数组、对象。

 

一、绑定HTMLClass

  ① 对象语法

  <div class="static" v-bind:class="{active : isActive, 'text-danger' : hasEorro}"></div>
    data:{
      isActive : true ,
      hasEorro : false 
    }

   渲染结果为:

 <div class="static active " ></div>

   注:当v-bind:class的表达式的值为 false,0,""(空字符串),null,undefined,NaN(Not a number) 时在JavaScript中为布尔值的假,即falsy,此时不会渲染

   上述的例子可以写成:

  <div class="static" v-bind:class="classObject"></div>
  data : {
    classObject : {
      active : true,
      'text-danger' : false
    }  
  }

  还可以绑定一个返回对象的计算属性(常用且强大):

    <style>
    .redborder{
        border : 1px solid red
    }
    .yellowbackground{
        background-color : yellow
    }
    </style>
    <div id="app0">
        <input type="text" v-model="myname"/>
        <p v-bind:class="pclass">
            my name is : {{myname}}
        </p>
    </div>    
    <script>
        var vm = new Vue({
            el:"#app0",
            data:{
                myname : "zxq",
                pclass : {
                    yellowbackground: 1,
                    redborder : true
                }
            }
        });
    </script>

② 数组语法

  同理,也可以用数组一次性绑定多个class

    <div v-bind:class="[activeClass,errorClass]"></div>
    data:{
       activeClass : 'active',
       errorClass : 'text-danger'
    }

③ 用于组件

  当在一个自定义组件上绑定class时,这些class将被绑定到组件的根节点上,且原有的class不会被覆盖

    Vue.component('my-component',{
     template : "<div class='foo bar'>hi</div>"
  })

  <my-component class='Active text-danger'></my-component>

      将会被渲染成

    <div class="active text-danger foo bar">hi</div>

   同理也可以使用v-bind绑定class

 

二、绑定style

① 同class,绑定style时也支持对象语法和数组语法

② 当使用v-bind:style时,需要添加浏览器引擎前缀的CSS属性,如transform,Vue.js会自动侦测补全

③ 从2.3.0开始,可以为style绑定中给的属性提供一个包含多个值的数组,常用于提供多个带前缀的值。

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

  这样写只会渲染数组中最后一个被浏览器支持的值,如上中,如果浏览器支持不带前缀的flexbox,那么就只会渲染display:flex。