v-if缆巧、v-else-if、v-else以及v-show
條件指令v-if陕悬、v-else-if、v-else
類似于JavaScript里的if按傅、else-if饼暑、else，這三個指令根據(jù)表達式的值對DOM/組件進行渲染/銷毀。
值得注意的是，v-else-if必須跟在v-if之后肥惭，v-else必須跟在v-else-if或者v-if之后跳纳。
如果想一次性判斷多個元素，可以將他們包裹在template之內(nèi)，使用條件指令操作外層的template耐版，template并不會包含在最終的渲染結(jié)果中祠够。
<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”按鈕舌狗，輸入框內(nèi)的placeholder改變，但當輸入內(nèi)容再進行切換后痛侍，內(nèi)容依舊存在，說明<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實現(xiàn)的視覺效果完全一致扒最，但是還是有本質(zhì)區(qū)別的华嘹，v-show改變CSS display的值，v-if徹底移除元素耙厚。
開發(fā)技巧：因為v-show是改變CSS屬性，無論表達式真假與否俯渤，都會被編譯型宝。v-if直接操作DOM的移除/渲染侦鹏，所以v-if更適合不經(jīng)常變化的場景臀叙，v-show適合頻繁變化的場景劝萤。
列表循環(huán)指令v-for
表達式需結(jié)合in使用渊涝，類似v-for="item in items"
數(shù)組
<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中的數(shù)據(jù)循環(huán)渲染跨释，item相當于items元素的別名，同時還支持index作為可選索引
對象
遍歷對象屬性時鳖谈，有兩個可選參數(shù)阔涉，分別為鍵名和索引
<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>
整數(shù)
<span v-for="n in 5">{{ n }}</span>
輸出：12345
v-text和v-html
v-text
面試考點：v-text和{{}}功能一樣，展示文本贯要，但是v-text比{{}}好的地方是椭住，當網(wǎng)速很慢或者javascript出錯時，會暴露我們的{{xxx}}京郑，而v-text不會顯示出來。
<span v-text="message"></span>
v-html
面試考點：v-html和v-text區(qū)別在于v-text輸出的是純文本跟狱，瀏覽器不會對其再進行html解析金拒，但v-html會將其當html標簽解析后輸出套腹。
<span v-html="message"></span>
message: '<strong>Hello</strong> world',
Hello world
以上是本期全部內(nèi)容，欲知后事如何电禀，請聽下回分解<(￣︶￣)↗[GO!]
