這一節我們來講條件渲染，單獨講解條件渲染可能比較單調和簡單，這裏我添加了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結合這些條件渲染可對數據結構具有相似性的數據進行渲染節省代碼在項目中具有很強的抽象性。