五、Vue的条件渲染（v-if、v-show、v-for指令）
v-if（控制DOM的存在与否）、v-show（控制DOM的显示与否）
v-if和v-show效果类似，都是控制内容是否显示出来，但是还是有区别的
举个例子：
<body>
<div id="root">
<div v-if="show">hello world</div>
<button v-on:click="handleClick">toggle</button>
</div>
<script>
new Vue({
el:"#root",
data:{
show:false,
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
</body>
image.png
当show为false时，div标签的相关内容显示不出来，从控制台可以看出，div标签里的内容是直接被注释了，所以显示不出来；
但是当v-if改成v-show时，显示的结果是一样的，但是操作却不一样，打开控制台可以看到：
image.png
标签以及标签里的内容还是有的，但是div标签的display属性显示的是none，导致该标签内容显示不出来
总结一下v-if和v-show的共性和区别：
v-if和v-show都可以使标签的内容显示或者不显示，从结果上来看，两个指令的差别不是很大，但是v-if是直接把标签以及内容注释掉，v-show是利用属性将内容隐藏；利用这两个指令的区别，当使用的次数不多的时候，可以用v-if，当使用的次数较多的时候，用v-show可以提高效率。
有v-if指令，相对应的也就会有v-else指令，使用的时候可以解释为当满足if的条件时，执行if条件下的指令；不然就执行v-else条件下的指令。
例子如下：
<body>
<div id="app">
<div v-if="show">{{message}}</div>
<div v-else>Bye World</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:false,
message:"Hello World"
}
})
</script>
</body>
这就是当v-if为false时，将不执行v-if的内容，而是执行v-else的内容。
注意：v-if标签和v-else标签一定要在一起使用，两个标签之中不能添加其他的标签，否则会报错
还可以写更复杂的表达式，例子如下：
<body>
<div id="app">
<div v-if="show === 'a'">This is A</div>
<div v-else-if = "show ==='b'">
This is B
</div>
<div v-else>This is others</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:'b'
}
})
</script>
</body>
这个例子中用到了v-if，v-else-if，v-else三个指令语句，当哪个符合条件时，哪个就会显示出来，实例里，data中显示的是show：b，这个符合v-else-if的指令，所以就执行This is B指令。
当然，这三个指令也是不可以分开的。
v-for指令（控制一组数据，来循环显示页面上的DOM结构）
可以理解为对于列表中的项进行依次展示，举个例子：
<body>
<div id="root">
<div v-show="show">hello world</div>
<button v-on:click="handleClick">toggle</button>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show:false,
list:[1,2,3]
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
</body>
此例中，Vue实例的数据项增添了列表list项，模板中增加了v-for指令，标签内容是item；
image.png
故当有一个数据需要依次罗列的时候，v-for可以用的到，
网友评论