列表渲染：
列表渲染：
<body>
<div id="vue1">
#列表渲染
<ul>
<li v-for="data in datalist" :key="index">
{{data}}
</li>
</ul>
#列表渲染，加上屬性
<ul>
<li v-for="(data,index) in datalist">
{{data}}-----{{index}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#vue1",
data: {
datalist:["a","b","c"]
},
})
</script>
</body>
用v-for來進行列表渲染，還可以渲染屬性，還可以添加key。
key作用：
一、跟蹤每一個節點的身份，從而重用和重新排序現有元素
二、理想的key值是每一項都有的且唯一的id
數組更新：
a.使用一下方法操作數組，可以檢測到變動push()、pop()、unshift()、splice()、sort()、reverse()
b.filter()、concat()、slice(),新數組替換舊數組
c.如果直接用索引值來改變元素
過濾：
<body>
<div id="vue1">
<input type="text" v-model="mytext" />
<ul>
<li v-for="data in computedlist" >
{{data}}
</li>
</ul>
#列表渲染，加上屬性
<script type="text/javascript">
var vm = new Vue({
el: "#vue1",
data: {
mytext:"",
datalist:["a","b","c"]
},
computed:{
computedlist:function(){
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
})
</script>
</body>