vue入門條件和列表渲染

v-if指令，很容器理解就是乙個條件判斷，當條件成立時渲染；另外，還能夠使用v-else-if和v-else，v-else元素必須緊跟在帶v-if或者v-else-if的元素的後面，否則它將不會被識別。bc

根據上邊的例子，v-if 主要就是決定元素的顯示和隱藏；還有另外乙個相同作用的指令v-show，他們的區別在於，v-show 解析之後，相當於在元素上新增了display:none的樣式，而 v-if 則是該部分的元素不會渲染，也就是說，審查元素時看不到該部分的元素。

如果需要頻繁切換，使用 v-show 會更好，因為 v-if 每次條件成立時，會重新渲染。

v-for 渲染陣列資料，使用item in items的語法，遍歷陣列。

另外，在迴圈中，我們還能夠使用(item, index) in items，index 是陣列中的索引；除了遍歷陣列外，還能夠遍歷物件(value, key) in items

vue 官方文件建議，在使用 v-for 時，為每個元素指定乙個唯一的 key 值。通常，我們使用陣列的 index 作為 key 值，但是，其實並不推薦這麼做。

使用v-for更新已渲染的元素列表時，預設用就地復用策略；列表資料修改的時候，他會根據 key 值去判斷某個值是否修改，如果修改，則重新渲染這一項，否則復用之前的元素；

vue 的雙向繫結，是監測到資料變化之後，做出對應的響應事件；vue 包含一組觀察陣列的變異方法（改變原始陣列的方法），主要如下：

除了改變原始陣列，有些方法，會返回乙個新陣列，例如：filter()，concat() （拼接陣列），slice() （提取字串），vue 也能夠監聽到陣列的變化。

注意vue 無法檢測到一下陣列的變化：

使用索引設定陣列的值vm.items[indexofitem] = newvalue修改陣列長度vm.items.length = newlength

解決辦法：

問題二：

除了陣列的變化，有些檢測不到之外，vue 不能檢測物件屬性的新增或刪除

var vm =
newvue(}
)// `vm.a` 現在是響應式的
// `vm.b` 不是響應式的
vm.b =
2

解決辦法：

var vm =
newvue(}
})

使用vue.set:

如果需要設定多個屬性，可以使用 object.assign (物件的拷貝)，但是應該將兩個物件的屬性建立乙個新的物件

// 反例
object.
assign
(vm.userprofile,
)// 正確做法
vm.userprofile = object.
assign
(, vm.userprofile,
)

v-for除了能夠遍歷 data，還可以是 method 中的乙個方法；

v-for 和 v-if 還能夠作用在 template 上；

v-for 和 v-if 同時使用時，v-for 優先順序更高；但一般不推薦同時使用。

vue入門 條件和列表渲染