class 与 style 绑定

操作元素的 class 列表和内联样式是数据绑定的常见需求。因为它们都是 attribute，用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

如果不使用 class

对HTML中的DOM进行操作。1.获取事件源（标签）2.事件 3.事件驱动js代码

绑定HTML Class

对象语法

// active 这个 class 存在与否将取决于数据 property isActive 的 truthy。
// truthy（真值）指的是在布尔值上下文中，转换后的值为真的值
// 所有值都是真值，除非( false、0、""、null、undefined 和 NaN ）。
<p :class="{ active: isActive }">1</p> 

// v-bind: class 可以和普通的 class属性并存 
<p class="static" :class="{ active: isActive, 'text-danger': hasErr }">2</p>  

// 绑定对象
<p v-bind:class="classObject"></p>

// 返回对象的计算属性
<p v-bind:class="classObject"></p>
data: {
    classObject: {
    active: true,
    'text-danger': false
  },
    isActive: true,
    error: null
},
computed: {
    classObject: function () {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
    }
}

数组语法

// 把一个数组传给 v-bind
<p :class="[activeClass, errorClass]"></p>

// 三元表达式
<p :class="[isActive ? activeClass : '', errorClass]"></p>

// 在数组中使用对象
<p :class="[{ active: isActive }, errorClass]"></p>
data: {
    activeClass: 'active',
    errorClass: 'text-danger'
}

用在组件上

<div id="app">
        <!-- HTML被渲染成：  <p class="foo bar baz boo">Hi</p> -->
        <my-view class="c d"></my-view>
        <my-view :class="{active: isActive}"></my-view>
</div>

Vue.component('my-view', {
            template: '<p class="a b">Hi</p>'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true
            },
})

绑定内联样式

是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

如果不使用 v-bind

<script type="text/javascript">
        window.onload=function(){
            var div1=document.getElementById("div1");
            var btn0=document.getElementById("btn0");
            btn0.onclick=function(){
                div1.style.width="300px";
                div1.style.height="300px";
                div1.style.backgroundColor="red";
            }
        }
</script>

对象语法

<p :style="{ color: red, fontSize: fontSize + 'px' }"></p>
data: {
    activeColor: 'red',
    fontSize: 30
}

// 绑定到一个样式对象,对象常常结合计算属性
<p :style="Object"></p>
data: {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
}

数组语法

// 数组语法可以将多个样式对象应用到同一个元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>

自动添加前缀

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

多重值

// 渲染数组中最后一个被浏览器支持的值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>