1, Class 绑定
v-bind 指令用于动态地对html 属性进行改变。它主要是把属性绑定到一个变量。但vue 对class 属性进行了增强， 它可以绑定到一个对象和数组。 <div v-bind:class="{ active: isActive }"></div> , isActive 取值为true or false , 如果是true, div 就有active 样式。 如果是false, div 则没有active 样式。
2, 条件渲染
v-if 除了自己单独使用，还可以和v-else, v-else-if 使用。 If /else-if /else 和我们在js 中的语法是一样的，哪个语名块满足条件，那个语句块显示
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
使用v-if/v-else-if/v-else 指令时，需要把它添加到一个元素上，如果需要显示和隐藏一组元素呢？那需要把所有的元素包在 一个<template>元素中，并在上面添加 v-if 等指令。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
条件渲染中的元素重用
在v-if / v-else条件渲染中，不是这个语句块显示，就是那个语名块显示， 总之，肯定有一个语句块是开始就渲染好的。所以vue为了高效的渲染元素, 在两个语名块来回切换的时候，如果两个语句块中有元素相同的话，vue 就会拿渲染好的元素过来用，而不是重新渲染。
// html
<div id="app">
<template v-if="login">
<label>姓名</label>
<input placeholder="请输入姓名">
</template>
<template v-else>
<label>邮箱</label>
<input placeholder="请输入邮箱">
</template>
<button @click="toggle">点击切换</button>
</div>
// script
var vm = new Vue({
el: "#app",
data: {
login: true
},
methods:{
toggle: function(){
this.login = !this.login;
}
}
})
在v-if 和v-else 两个语句块中，都有input 元素。 我们设 login = true, 也就是说，页面显示的时候，v-if语名块中的元素显示，input 元素已经渲染完成。当我们点击按钮的时候，login 设为了false, v-else 语句块显示。根据vue 原则， input 元素不会重新渲染，它会拿v-if 语句块中的元素用。 我们可以检测一下，当我们输入姓名的时时候，我们点击按钮切换，可以看到我们刚才输入的内容还在。这就证明了，虽然在v-if 和v-else 中分别有两个input 但其实它是一个元素。
这时可以给相同的元素添加key 属性，key 属性不同，元素就不会复用。把上面的代码中，每一个input元素都添加key属性，当然key属性要保证唯一性，不能重复。我们先输入姓名，这次我们再点击按钮的时候，我们以前输入的内容没有显示。
<div id="app">
<template v-if="login">
<label>姓名</label>
<input placeholder="请输入姓名" key="name">
</template>
<template v-else>
<label>邮箱</label>
<input placeholder="请输入邮箱" key="email">
</template>
<button @click="toggle">点击切换</button>
</div>
还有一个控制元素显示和隐藏的是 v-show 。 <h1 v-show="ok">Hello!</h1> 如果 ok 为true, 则显示，否则隐藏。 有 v-show 的元素会始终渲染并保持在 DOM 中 v-show 是简单的切换元素的 CSS 属性 display 。
3， v-for 列表渲染
v-for 指令最主要的就是记住它怎么用. 首先它要在用在元素上，可以是单个元素，也可以是一组元素，一组元素的话，就要用template 把元素包起来，用到template 标签上。其次它的语法比较特别， v-for = “item in items” , items 是源数据数组，
就是我们在new Vue（｛…｝）data 中 定义的变量， item 是数组中的每一项，可以用到html 模版中，从而 对数组中的内容进行引用，把它们渲染到页面中。它对数组进行迭代，数组中有多少项，就会渲染出多少个元素
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
]
}
})
v-for中, 我们还可以获得二个参数，那就是当前项的索引，语法v-for = (item,index) in items， index 就是每一项的索引，这对操作某一个项时非常有用，比如删除操作，我们肯定要知道删除哪一项。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
上面是用到一个元素身上，如查我们想用到一组元素身上，那就需要把这一组元素用template包起来
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
在进行列表渲染时，一次可以渲染出好多项，所以最好给每一项提供一个key , 表示每一项的唯一性，每一项都唯一了，在进行列表操作的时候，vue 就会知道，我们更改了哪一项，有利于优化。key 值是一个字符串，最好是一个id, 因为我们需要渲染的每一项是对象，所以给对象添加个id属性就可以了。
<ul id="example-1">
<li v-for="item in items" key="item.id">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{
id:1,
message: 'Foo'
},
{
id:2,
message: 'Bar'
}
]
}
})