v-if 和 v-show
直接看v-if例子來
<h1> v-if 和 v-show </h1>
<div id="vue-app">
<button v-on:click="error=!error">Error</button>
<button v-on:click="ok=!ok">Ok</button>
<p v-if="error">網絡連接錯誤：404</p>
<p v-else-if="ok">網絡連接成功：200</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#vue-app',
data: {
error: false,
ok: false
}
});
</script>
TIM圖片20180125164626.jpg
TIM圖片20180125164630.jpg
我們會看到邀桑，當條件為真時瞎疼，p存在于DOM中，為假時概漱，p完全不存在丑慎。這是因為v-if是真實的條件渲染，它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監(jiān)聽器和子組件。有更高的切換消耗竿裂。
再來看看v-show
<p v-if="show">網絡連接錯誤：404</p>
<p v-else-if="show">網絡連接成功：200</p>
TIM圖片20180125170354.png
在v-show中玉吁，僅僅改變的是p的display。因為v-show只是簡單地基于 CSS 切換腻异。有更高的初始渲染消耗进副。
所以，需要頻繁切換時用v-show悔常，如果在運行時條件不大可能改變則用v-if影斑。
v-for
<h1>for循環(huán)</h1>
<div id="vue-app">
<ul>
<li v-for="word in words">
{{word}}
</li>
</ul>
<template v-for="(user,index) in users">
<p>{{index}}.{{user.name}}.{{user.age}}</p>
</template>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#vue-app",
data: {
words: ["apple", "pear", "banana"],
users: [{
name: "huijiao",
age: 20
},
{
name: "mimi",
age: 21
},
{
name: "shizhentao",
age: 22
}
]
}
})
</script>
TIM圖片20180125183247.jpg
在這里我需要說一點，遍歷users數組時我們用到了template標簽机打，打開控制臺我們發(fā)現實際上并沒有這個標簽矫户。因為template在控制臺不會渲染。
