一、条件渲染

v-if v-else v-else-if指令

用法与if else else if类似。

v-show

v-show 的元素始终会被渲染并保留在 DOM 中。

v-if和v-show的区别

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

二、列表渲染

v-for

使用范围：在HTML元素中使用，在template中使用，在组件中使用。
v-for可以访问所有父级作用域的property
可以传入的类型

1. 传入数字

<div><span v-for="n in 10">{{ n }} </span>
</div>

2. 传入数组

<ul id="app"><li v-for="item in items" :key="item.message">{{ item.message }}</li>
</ul>

var example1 = new Vue({el: '#app',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]}
})

3. 传入对象

<ul id="v-for-object" class="demo"><li v-for="value in object">{{ value }}</li>
</ul>

new Vue({el: '#app',data: {object: {title: 'book',author: 'writer',time: '2020-07-06'}}
})

传入多个参数

（参数名可以自定义，只要按顺序对上号）
对于数组：第一个参数为元素item，第二个参数为索引index
对于对象：第一个参数为值value，第二个参数为键key，第三个参数为索引index

<h1 v-for="(item, index) in items">{{ index }}:{{ item }} </h1>
<h2 v-for="(value, key, index) in object">{{index}}:{{key}}-{{value}}</h2>

var example1 = new Vue({el: '#app',data: {items: ['Foo', 'Bar'],object:{name:'myName',color:'blue',year:20}}
})

v-for 和v-if

v-for的优先级高于v-if，如果想要选择渲染部分节点，可以写在同一层

<li v-for="todo in todos" v-if="!todo.isComplete">
{{todo}}
</li>

如果想要选择是否执行循环，将v-if放在v-for的外层

<ul v-if="todos.length"><li v-for="todo in todos">{{ todo }}</li>
</ul>
<p v-else>No todos left!</p>

维护状态

在使用v-for的时候尽可能提供key 属性（关于key详见vue-api中特殊attribute）

<div v-for="item in items" v-bind:key="item.id"><my-component v-for="item in items" :key="item.id"></my-component>