vue学习笔记5：列表渲染
一、知识点
1.列表渲染的几种方法
2. key值的设置
3. 列表渲染关于数组的操作
4. 应用：根据输入的内容查询渲染列表
二、代码讲解
1. 如何进行列表渲染（in 与 of 都可以）
- v-for=“data in datalist”
- v-for=“data of datalist”
<!-- 数组的列表渲染 -->
<div v-for="data in datalist">{{data}}</div> <!-- 不打印索引值的列表渲染 -->
<div v-for="data of datalist">{{data}}</div>
<div v-for="(data,index) in datalist">{{data}}--{{index}}</div><!-- 打印索引值的列表渲染 -->
<div v-for="(data,index) of datalist">{{data}}--{{index}}</div>
<!-- 对象的列表渲染 -->
<div v-for="data in obj">{{data}}</div><!-- 不打印索引值的列表渲染 -->
<div v-for="data of obj">{{data}}</div>
<div v-for="(data,key) in obj">{{data}}--{{key}}</div><!-- 打印索引值的列表渲染 -->
<div v-for="(data,key) of obj">{{data}}--{{key}}</div>
2. key值的设置
- 用来跟踪每个节点的身份，从而重用和重新排序现有元素
- 理想的key值是每项都有的且唯一的id;例如：data.id
<ul>
<li v-for="data in datalist" key="data.id">{{data}}</li>
</ul>
3. 列表渲染关于数组的操作
可以改变原数组的方法
- push（）
- pop（）
- shift()
- unshift()
- splice()
- sort()
- reverse()
vm.datalist.push("1111") //改变原数组，在数组datalist中加入1111
不改变原数组的方法
- filter()
- concat()
- slice()
- map()
注：原数组不改变，若要使用这个值，需要赋值给新的数组再使用
newlist=vm.datalist.filter(item=>item.indexOf("11")>-1) //过滤出数组中包含11的项，并赋值给新数组
根据索引值改变数组
- vue.set()
- splice()
Vue.set(vm.datalist,3,"香蕉") //向数组中添加一个索引值为3的值：香蕉
4. 应用：根据输入的内容查询渲染列表
主要思路：对list数组进行过滤，输出包含输入的值对应的项
<body>
<div id="div1">
<input placeholder="输入你要搜索的值" @input="handleinput()" v-model="myvalue" /> <!-- myvalue绑定输入的值 -->
<ul>
<li v-for="data in datalist">{{data}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#div1', //绑定视图层的id
data: {
myvalue:'', //输入框的值初始值
datalist: ["苹果", "橘子", "橘猫","香蕉"],
list:["苹果", "橘子", "橘猫","香蕉"]
},
methods: {
handleinput() {
//filter过滤
var newlist = this.list.filter(item => item.indexOf(this.myvalue) > -1);//对list数组进行过滤，输出输入的值对应的项
this.datalist = newlist;//把过滤好的数组赋值给datalist
}
}
})
</script>
</body>
查询结果：
