vue入门5：列表渲染

最新推荐文章于 2024-07-19 17:58:13 发布

丙睦

最新推荐文章于 2024-07-19 17:58:13 发布

阅读量218

点赞数

分类专栏： VUE 文章标签：列表 vue

本文链接：https://blog.csdn.net/qq_30948207/article/details/104110724

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、知识点

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>

查询结果：

在这里插入图片描述