循環語句v-for
遍歷數組
<p v-for="(one,index) in list" v-cloak >{{one.id}}-----{{one.name}}----{{index}}</p>
data:{
list:[
{id:1,name:'a'},
{id:2,name:'b'},
{id:3,name:'c'},
{id:4,name:'d'}
]
}
one是每次遍歷的元素，index是索引，都可隨意起名。
遍歷對象
<p v-for="(key,val,index) in user" v-cloak >{{key}}-----{{val}}----{{index}}</p>
data:{
user: {id:1,name:'a'},
}
key是屬性名，cal是屬性值，index是索引，都可隨意取值
（in後也可以放數字）
key
<p v-for="item in user" :key = "item.id">
<input type="checkbox" />{{item.id}} --- {{item.name}}
</p>
user: [{id:1,name:'a'},
{id:2,name:'b'},
{id:3,name:'c'}
]
key在使用的時候，必須使用v-bind屬性綁定的形式，指定key的值，key的值只能用數字或字符串（新版本貌似對象也可）。
本例子中，如果不添加key，添加數據後對勾會給錯誤的選項（若選第一個添加數據後扔給第一個大打對勾）。
v-if和v-show
<h3 v-if="flag">這是使用v-if控制的元素</h3>
<h3 v-show="flag">這是使用v-show控制的元素</h3>
- v-if和v-show用於控制元素是否顯示。
- v-if每次都會重新刪除或創建元素。
- v-show不會進行dom的刪除和創建，而是切換元素display樣式。
- v-if有較高的切換性能消耗，v-show有較高的初始渲染消耗。
- 元素頻繁切換用v-show，元素不會被用戶看到用v-if
過濾器
使用格式｛｛數據名|過濾器名｝｝
過濾器只改變數據的顯示，並不會改變數據本身。
私有過濾器
filters:{名字:function(){}（寫在data中）（優先調用私有過濾器）
公共過濾器
Vue.filter(“名字”,function(){})；
函數中第一個參數爲過濾的數據，後面可自行添加多個參數。
實例：
{{msg|dateFormate}}
Vue.filter("dateFormate",function(dataStr,pattern)
{
return dataStr.replace(/自卑/g,"自慰");
})
將dataStr中的“自卑”全部換爲“自慰”。
若將正則表達式改爲使用"自卑",則只會替換第一個自卑。