Vue 条件渲染，列表渲染：指令v-if、v-for

一.v-if、v-show指令

1. v-if与v-else-if

• 如下例，两个button绑定点击事件，触发更改error和success的值。
• v-if用来判断，为true的话，就执行标签内的语句；v-else-if，与js中elseif用法一致。

2. v-show

• 用法与v-if大致一样。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

二.v-for指令

1.v-for循环遍历数组

• v-for="item in charactors"，遍历charactors数组里的每一项
• v-for="(item, index) in users"，可传两个参数，item遍历users数组中的每一项，index代表索引值。由于users数组里的每一项都是对象，所以输出时可带上属性来获取属性值，eg:item.name。

2. v-for on a template

• 当在div中循环遍历时，如图控制台中，div会被多次渲染于dom中。
• 如果将div改成template，就不会出现这样的复杂情况

• v-for on a template

3.v-for循环遍历对象

• 用法与遍历数组一致，可以传两个参数，val属性值，key属性名