列表渲染：
列表渲染：
<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>
1677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
