操作元素的class列表和内联样式Style是数据绑定的常见需求，通过 v-bind绑定Class列表与内联样式Style时，表达式结果可以实字符串、数组、对像,不过字符串拼接麻烦且易出错，通常使用对象和人数组方法。

---

1. 绑定HTML Class

1. 对象语法

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

//html
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
>
</div>

//js
data:{
    isActive:true,
    hasError:false
}

//渲染结果为
<div class="static isActive"></div>

2. 数组语法

把一个数组传给v-bind:class

//html
<div v-bind:class="[activeClass, errorClass]"></div>

//js
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

//渲染结果
<div class="active text-danger"></div>

---

【在组件上使用CLass属性】

将一个自定义组件上使用class属性时这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

//添加一些class属性
<my-component class="baz boo"></my-component>

//自定义组件
Vue.component(
      'mycomponent',
      {
        template:'<p class="foo bar">hi</p>'
    }
)

//HTML 将被渲染为
<p class="foo bar baz boo">Hi</p>

---

2. 绑定内敛样式：

1. 对象语法

//html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

//js
data:{
      activeColor:'red',
      fontSize:30
}

//hrml
//直接绑定到一个样式对象
<div vbind:style="styleObject"></div>

//js代码
data:{
     styleObject : {
            color:'red',
            fontSize: '30px'
    } 
}

2. 数组语法

可以将多个样式对象应用到同一个元素上

//html
<div v-bind:style="[baseStyles, overridingStyles]"></div>

//js
data:{
     baseStyles : {
            //继承样式
    } ,
    overridingStyles:{
           //优先样式
    }
}

【注意】

1. 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
2. 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值时，只会渲染数组中最后一个被浏览器支持的值。

---

3. 条件渲染

1. v-if

实现在多个元素之间切换，需添加在template上

//html
<div id="app">
    <template v-if=bool>
      yes
    </template>
    <template v-else>
      no
    </template>
  </div>

//js
data: {
  bool: true
}

//渲染结果不包含template元素
<div id="app"> yes </div>

2. v-show

另一种根根据条件展示元素选项，用法与v-if大致相同

//html
<h1 v-show="ok">Hello!</h1>

3. v-if VS v-show

1. v-show 不支持 <template> 元素，也不支持 v-else。
2. 带有v-show的元素始终被渲染并保留在DOM中，v-show 只是简单地切换元素的 CSS 属性 display（只是简单地基于 CSS 进行切换）。
3. v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
4. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
5. 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4. key管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快。Vue提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可，即带有key属性的元素完全独立，不带有key的元素可复用。