VUE条件渲染(v-if v-show v-for)

v-if:

v-if是一个指令，（逻辑与原生js一样，只是使用方法稍有不同）需要添加在元素上，如果想要添加在多个元素上，可以使用标签当成一个容器。

官网上的例子：

<div id="vv" v-if="mat > 5">
Now you see me
</div>
<div v-else>
Now you don't
</div>

var vm = new vue ({
el:"vv",
data:{
num : 10
},
computed:{
mat : function (){
return this.num*Math.random()
}
})

使用标签当容器

<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

利用key值管理可以复用的元素，由于vue尽可能的少渲染，所以在以下代码中如果不使用key值，会使input标签不会重新渲染，输入内容会一直存在。

key值的作用就是将input标签添加上自己独有的特征，在我看来与class、id比较类似。

<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>

v-show 与 v-if 的使用方法一致，不同点在于，v-if在每一次切换是都会重新渲染，如果一开始的条件是false，则会等到第一次条件成立开始渲染。v-show 无论初始条件如何，都会渲染进来，改变的是DOM的 display ：none／block。如果需要多次渲染，使用v-show。

v-for:

v-for类似与js中的遍历，使用方法为v-for(item in items)，items是数组 item是数组中的元素。在 v-if与v-for一起使用时，v-for的权重更高。

<div id="demo">
<table>
<tr v-for="A in B">
<td>{{ A.name }}</td>
<td>{{ A.age }}</td>
<td>{{ A.sex }}</td>
</tr>
</table>
</div>

<script>
var vm = new Vue({
el: '#demo',
data: {
B:[{name: 'Jack',age: 30,sex: 'Male'},
{name: 'Bill',age: 26,sex: 'Male'},
{name: 'Tracy',age: 22,sex: 'Female'},
{name: 'Chris',age: 36,sex: 'Male'}]
}
})
</script>