條件渲染：
單個元素渲染：
v-if、v-else組合：
。。。。。。
<body>
<div id="vue1">
#單個元素渲染
<p v-if="isCreate">v-if</p>
<p v-else>v-else</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#vue1",
data: {
isCreate:true,
},
})
</script>
</body>
v-if、v-else-if、v-else組合：
。。。。。。
<body>
<div id="vue1">
#單個元素渲染
<p v-if="isCreate ==='A'">v-if</p>
<p v-else-if="isCreate ==='B'">v-else-if</p>
<p v-else>v-else</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#vue1",
data: {
isCreate:'B',
},
})
</script>
</body>
用v-if下面緊跟着v-else，其中如果沒有v-if或v-else-if v-else不會被識別。
多個元素渲染:
。。。。。。
<body>
<div id="vue1">
#多個元素渲染
<template v-if="isCreates">
<p>第一個</p>
<p>第二個</p>
</template>
<template v-else>
<p>第三個</p>
<p>第四個</p>
</template>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#vue1",
data: {
isCreates:false
},
})
</script>
</body>
在單個元素渲染的基礎上添加一個template標籤，而且這個標籤最終不會被渲染到裏面。個人覺得就是一個打包的作用。
v-if和v-show區別：
v-if：
如果爲false就不會創建節點，如果爲true就會創建節點。
v-show：
如果爲flase頁面不會顯示，但是會創建節點；如果爲true會顯示也會創建節點。