Vue.js 系列 - 列表渲染
Posted 辣鸡OvO
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 系列 - 列表渲染相关的知识，希望对你有一定的参考价值。
列表渲染是比较重要的部分，用到的频率非常大，会写得比较多，认真看完。
直接开始敲代码，先写一个简单的列表渲染出来看一下效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) of list">
{{ item }} --- {{ index }}
</div>
</div>
<script> var app = new Vue({ el: "#app", data: { list: [
"Hello",
"Du Dudu",
"Nice",
"To",
"Meet",
"You" ] } })
</script>
</body>
</html>在 data 里，有一个 list 的数组，在 app 这个挂载点里面有个 div 标签，通过一个 v-for 指令循环了 data 里的数组 list 。v-for 指令中 item 是数组里的值， index 是 Vue 自动生成的索引值。在浏览器下看一下效果：
这样就是一个 Vue 最基础的列表渲染，在实际开发中，还有很多细节需要讲解，我们继续细究。
在我们使用 v-for 循环列表的时候，要绑定一个唯一的 key 值，可以提高性能。这个 key 值一般都不用我们去思考，因为实际开发中，data 中的数据都是后端传回来了，大多数情况都是一个对象的形式，不是像我刚刚写的单纯列表，如下，我们把 id 当做 key 的值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item of list" v-bind:key="item.id">
{{ item.text }}
</div>
</div>
<script> var app = new Vue({ el: "#app", data: { list: [ { id: "0001", text: "Hello" }, { id: "0002", text: "World" } ] } })
</script>
</body>
</html>其实跟上面的差不多，只是列表里面的数据变成了对象，用 v-bind:key 绑定了一个 key 值，打开浏览器，刷新一下刚刚的页面：
列表渲染就是这么简单，只要把一个 data 里的列表数据用 v-for 循环到页面上的某个标签就行。
下面讲的是列表数据的操作及一些注意的地方。
通过一个列表的 push 方法，可以往列表里添加一个数据，我们试一下：
当我们把数据 push 进去之后，数据也更新到了页面之上。
有的小伙伴喜欢用下标的形式往列表里添加数据，也就是下边演示的这种：
会发现，虽然数据添加进去了，但是页面上并没有进行渲染。所以我们不能使用类表下标的方式进行添加，只能通过一些 Vue 变异的方法进行操作。变异方法有如下
push：往数组添加一个数据
pop：删除数组最后一个数据
shift：删除数组第一个数据
unshift：往数组第一项添加内容
splice：数组的截取
sort：对数组进行排序
reverse：对数组进行取反
重点讲一下 splice 这个方法，因为很多时候我们要多数据进行修改，那么久可以用到 splice 这个方法了。
splice(index, len, [item])可以用来替换 / 删除 / 添加数组内某个值或者多个值
index：数组开始的下标
len：替换 / 删除的长度
item：替换的值，删除操作的话 item 为空
现在演示以下，把第二个 World 改成 DuDuDu ：
这样我们就可以修改任意一个数据。
当我们需要循环多个标签的时候，只要在要循环的标签外面包裹一个标签就行，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) of list" v-bind:key="item.id">
<h1>{{ item.text }}</h1>
<div>{{ index }}</div>
</div>
</div>
<script> var app = new Vue({ el: "#app", data: { list: [ { id: "0001", text: "Hello" }, { id: "0002", text: "World" } ] } })
</script>
</body>
</html>你会看到，<h1>标签 和 <div>标签都渲染到了页面上：
data 中有很多对象类型的数据，这些对象也可以进行循环渲染，把之前的代码全删了，改成如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, key, index) of userInfo" v-bind:key="index">
{{ item }} - {{ key }} - {{ index }}
</div>
</div>
<script> var app = new Vue({ el: "#app", data: { userInfo: { name: "小明", age: 18, gender: "male", salary: "secret" } } })
</script>
</body>
</html>会发现我循环了三个值出来，item 就是对象 userInfo 的值，key 是对象 userInfo 的键，index 是下标，暂时把下标当做 key 值，但是尽量不要用下标当 key 值。会看到如下效果:
我们通过修改引用修改、添加、删除对象的值，比如说添加一个 address: "shanghai" ：
列表渲染就介绍这么多，可以通过官方文档进行深入了解。
关注持续更新
以上是关于Vue.js 系列 - 列表渲染的主要内容，如果未能解决你的问题，请参考以下文章