(5)vue 增强绑定Class和Style

由于Class和Style绑定使用频繁，字符串拼接麻烦且易错。因此，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

一、Class

1.对象

（1）对象语法

    <style>
        .active{
            color:blue
        }
        .line{
            text-decoration:underline
        }
    </style>
    <div id="example">
        <div v-bind:class="{ active: isActive, line:isLine}">abc</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#example',
            data: {
                isActive: true,
                isLine: true
            },
        })
    </script>

isActive，isLine是bool值，用来控制该类是否有此名称

运行

（2）绑定类和非绑定类共存

<div class="active" v-bind:class="{ line:line}">abc</div>

（3）也可以只传一个对象

    <div id="example">
        <div  v-bind:class="classObject">abc</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#example',
             data: {
              classObject: {
                active: true,
                line: true
              }
            }
        })
    </script>

（4）常用模式

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

 

2.数组

（1）数组语法

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

    <div id="example">
        <div v-bind:class="[activeClass,lineClass]">abc</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#example',
             data: {
                activeClass: 'active',
                lineClass: 'line'
            }
        })
    </script>

（2）三元表达式

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy^[1] 时才添加 activeClass

    <div id="example">
        <div v-bind:class="[isActive ? activeClass : '', lineClass]">abc</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#example',
            data: {
                isActive: true,
                activeClass: 'active',
                lineClass: 'line'
            }
        })
    </script>

或者简写成

<div v-bind:class="[{ active: isActive }, lineClass]">abc</div>

（3）组件上使用

？？

 

二、Style

1.对象 

（1）基本语法

    <div id="example">
        <div v-bind:style="{color:colorStyle, 'fontSize':sizeStyle}">abc</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#example',
            data: {
                colorStyle: 'blue',
                sizeStyle: '30px'
            }
        })
    </script>
</body>

 或者

    <div id="example">
        <div v-bind:style="objectStyle">abc</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#example',
            data: {
                objectStyle:{
                color: 'blue',
                fontSize: '30px'
                }
            }
        })
    </script>

2.数组

（1）多个样式

    <div id="example">
        <div v-bind:style="[objectStyle1, objectStyle2]">abc</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#example',
            data: {
                objectStyle1:{
                color: 'blue',
                },
                objectStyle2:{
                fontSize: '30px'
                }
            }
        })
    </script>

（2）自动添加前缀

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

？？

（3）多重值

？？