#,過濾器
#,在Vue2.x中,過濾器只能在mustache綁定中使用,為了在指令幫定中實現同樣的行為,你應該使用計算屬性;
#,過濾器可以串聯 {{ message | filterA | filterB }}
#,條件渲染
#,注意v-if與v-show的區別,v-if是決定是否創建DOM,而v-show則是DOM始終存在,只是改變了顯示樣式;
#,如果要切換多個元素的時候,我們就使用<template v-if='ok'>;
#,
v-if
有更高的切換消耗而
v-show
有更高的初始渲染消耗。因此,如果需要頻繁切換使用
v-show
較好,如果在運行時條件不大可能改變則使用
v-if
較好。
#,列表渲染
#,<li v-for='item in items>{{item.message}}</li>,也可以用of 代替in,這種語法和JavaScript的語法更加接近;
#,和v-if類似,如果我們要渲染多個元素,則可以使用 <template v-for='item in items> <xxxx> < bbb> </tempate>
#,用v-for不但可以迭代數組,也可以迭代對象,然后item就表示對象的屬性值,當然,也可以像下面這樣獲取到對象屬性的key、value、index;
<ul>
<li v-for='(value, key, index) in person'>
{{key}}, {{value}}, {{index}}
</ul>
#,還可以使用v-for迭代取整數;<span v-for="n in 10">{{ n }} </span>
#,可以在自定義組件中使用v-for,此時如果要把v-for的item值傳遞給子組件,需要用到子組件的prop屬性;
#,為了提高在items變化時v-for的渲染效率,我們最好給元素指定一個key,例如:
<
div
v-for
=
"item in items"
:key
=
"item.id"
>
<!-- 內容 --></div>