这一节我们来讲条件渲染，单独讲解条件渲染可能比较单调和简单，这里我添加了v-for的组合使用。
条件渲染主要有v-if，v-else-if,v-else,v-show。
v-if后面接的表达式需要指明结果是真还是假，当条件为真时渲染v-if所在标签的内容，当条件为假是不渲染v-if所在标签的内容。
v-else-if后面接的表达式指明结果为真还是假，当条件为真时渲染v-else-if所在标签的内容，当条件为假是不渲染v-else-if所在标签的内容。
v-else是当上述的条件都不成立时，渲染v-else标签内的内容。
v-show后面接的表达式需要指明结果为真还是假，当结果为真时显示v-show所在标签内的内容，当为假时隐藏v-show所在标签内的内容。
v-for可以批量的处理一些数据上具有相同结构的数据。
概念上的东西先将这多，来点干货让大家感受一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div id="test">
<div v-for="item in data">
<div v-show="!item.hide" >id is {{item.id}}
<input type="text" v-model="item.id">
<input type="text" v-model="item.name">
<input type="text" v-model="item.age">
<input type="radio" v-if="item.sex==='male'">
<input type="checkbox" v-else-if="item.sex==='female'">
<input type="button" v-else>
</div>
</div>
</div>
<script>
var value=0;
var vm = new Vue({
el: '#test',
data: {
data:[
{
id:1,
name:"first",
age:15,
sex:"male",
hide:false
},
{
id:2,
name:"second",
age:19,
sex:"female",
hide:false
},
{
id:3,
name:"third",
age:20,
sex:"",
hide:false
},
{
id:4,
name:"fourth",
age:24,
sex:"male",
hide:true
}
]
},
});
</script>
</body>
</html>
程序设计
（1）数据结构data为人的信息，有ID号，名字，性别，年龄，信息是否隐藏这些组成。
（2）设计使用v-for遍历人员信息数组，当人员信息的hide属性为true时隐藏这个人的信息，如果为false显示这个人的信息，
显示人员信息的id，name,age，根据人员信息的sex属性值为male显示单选按钮，当属性值为female时显示复选按钮，为其他值时显示按钮。
结果
从图中可以看到显示的结果和设计的结果一致，同时在DOM结构中看到v-show部分的显示状态为none而不是没有渲染。
v-for结合这些条件渲染可对数据结构具有相似性的数据进行渲染节省代码在项目中具有很强的抽象性。