一昔穴、前言
條件渲染和列表渲染其實(shí)就是使用vue的v-if和v-for兩個(gè)指令來控制是否渲染和循環(huán)渲染的邏輯。
二提前、條件渲染
條件渲染使用vue的邏輯綁定指令來實(shí)現(xiàn)分支結(jié)構(gòu)吗货，來決定渲染哪一個(gè)dom或哪一個(gè)組件。
<div id = "app">
<div v-if = "status1">1</div>
<div v-else-if = "status2">2</div>
<div v-else = "status3">3</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
status1: false,
status2: true,
status3: false
}
});
</script>
生成的dom為：
<div>3</div>
條件渲染中的元素是可復(fù)用的狈网，分支中相同的標(biāo)簽或組件會(huì)在分支切換過程中被保留宙搬。
<div id = "app">
<template v-if = "status">
<label for = "username">username:</label>
<input id = "username" type = "text" />
</template>
<template v-else>
<label for = "email">email:</label>
<input id = "email" type = "text" />
</template>
<button @click="toggleStatus">toggle</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
status: true
},
methods: {
toggleStatus: function(){
this.status = !this.status;
}
}
});
</script>
可以看到，上面的分支中都存在label拓哺，input元素勇垛。而且順序都是label->input，這樣label和input元素會(huì)復(fù)用士鸥，并不會(huì)涉及dom的remove和append窥摄。只是更改它的屬性和文本值。
提示：如果不需要復(fù)用础淤，那么在不需要復(fù)用的標(biāo)簽上添加唯一的key
補(bǔ)充：v-show也可以進(jìn)行元素的切換崭放，不過只是簡單的css切換。
v-if有較大的切換開銷鸽凶，v-show有較大的初始渲染開銷
三币砂、列表渲染
列表渲染就是使用vue的v-for指令渲染與數(shù)組、對象有關(guān)的多條信息玻侥，用dom展示出來决摧。
<div id = "app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
items: ['apple', 'pear', 'banana']
}
});
</script>
渲染的dom為：
<ul>
<li>apple</li>
<li>pear</li>
<li>banana</li>
</ul>
提示：對象渲染也是使用for-in。
補(bǔ)充：數(shù)組可以使用(item, index) in items遍歷時(shí)得到元素和下標(biāo)
????????????對象可以使用(key, value, index) in items遍歷得到鍵凑兰、值掌桩、下標(biāo)
注意：在使用v-for時(shí)，盡量使用key（需要使用v-bind綁定姑食，這里不同v-if）
特殊：v-for="n in 10"可以渲染1到10的值波岛，v-for的優(yōu)先級大于v-if
四、引用類型數(shù)據(jù)的更新
- vue不能檢測data中音半，簡單賦值方法使數(shù)組更新的操作：
arr[index] = item-
arr.lenght = 2
如果要更新则拷，應(yīng)該使用js內(nèi)置方法贡蓖，push、pop煌茬、splice等斥铺。
或者內(nèi)置方法;
Vue.set(arr, idx, val)
vm.$set(arr, idx, val)
- vue不能檢測data中，對象屬性的添加和刪除：
obj[newKey] = newVal-
delete obj[oldKey]
如果要更新坛善，應(yīng)該使用內(nèi)置方法：
Vue.set(obj, key, val)
vm.$set(obj, key, val)
提示：set的方法總的來說晾蜘，就是
Vue.set/vm.$set(iterator, 索引，val)
