v-if、v-else-if、v-else以及v-show
條件指令v-if、v-else-if、v-else
類似於JavaScript裏的if、else-if、else，這三個指令根據表達式的值對DOM/組件進行渲染/銷燬。
值得注意的是，v-else-if必須跟在v-if之後，v-else必須跟在v-else-if或者v-if之後。
如果想一次性判斷多個元素，可以將他們包裹在template之內，使用條件指令操作外層的template，template並不會包含在最終的渲染結果中。
<div id="app">
<template v-if="state">
<p>文本A</p>
<p>文本B</p>
<p>文本C</p>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // app是Vue實例的掛在對象
data: {
state: true
}
})
</script>Vue在渲染元素時，出於效率考慮，會儘可能的複用已有元素而非重新渲染。
<div id="app">
<input type="text" v-if="state" placeholder="電話">
<input type="text" v-else placeholder="郵箱">
<button @click="toggle">切換</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // app是Vue實例的掛在對象
data: {
state: false
},
methods: {
toggle () {
this.state = !this.state
}
}
})
</script>點擊“toggle”按鈕，輸入框內的placeholder改變，但當輸入內容再進行切換後，內容依舊存在，說明<input>被複用了，只是修改了placeholder。
要是不希望被複用，需要在指定的元素上添加key值，key值存在且唯一。
<div id="app">
<input type="text" v-if="state" placeholder="電話" key="phone">
<input type="text" v-else placeholder="郵箱" key="email">
<button @click="toggle">切換</button>
</div>v-show
面試考點：v-show和v-if實現的視覺效果完全一致，但是還是有本質區別的，v-show改變CSS display的值，v-if徹底移除元素。
開發技巧：因爲v-show是改變CSS屬性，無論表達式真假與否，都會被編譯。v-if直接操作DOM的移除/渲染，所以v-if更適合不經常變化的場景，v-show適合頻繁變化的場景。
列表循環指令v-for
表達式需結合in使用，類似v-for="item in items"
數組
<div id="app">
<ul>
<li v-for="(item, index) in items">{{index}}-{{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // app是Vue實例的掛在對象
data: {
items: [
'大盤雞',
'周黑鴨',
'糖醋里脊',
]
}
})
</script>用v-for將items中的數據循環渲染，item相當於items元素的別名，同時還支持index作爲可選索引
對象
遍歷對象屬性時，有兩個可選參數，分別爲鍵名和索引
<div id="app">
<ul>
<li v-for="(value, key, index) in user">{{index}}-{{key}}:{{value}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // app是Vue實例的掛在對象
data: {
user: {
name: '一枚蛋Oops',
age: 3,
hobby: '漂亮妹子'
}
}
})
</script>
整數
<span v-for="n in 5">{{ n }}</span>輸出：12345
v-text和v-html
v-text
面試考點：v-text和{{}}功能一樣，展示文本，但是v-text比{{}}好的地方是，當網速很慢或者javascript出錯時，會暴露我們的{{xxx}}，而v-text不會顯示出來。
<span v-text="message"></span>v-html
面試考點：v-html和v-text區別在於v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。
<span v-html="message"></span>
message: '<strong>Hello</strong> world',Hello world
以上是本期全部內容，欲知後事如何，請聽下回分解<(￣︶￣)↗[GO!]