《Vue零基础入门教程》第十四课：列表渲染

往期内容

《Vue零基础入门教程》第六课：基本选项

《Vue零基础入门教程》第八课：模板语法

《Vue零基础入门教程》第九课：插值语法细节

《Vue零基础入门教程》第十课：属性绑定指令

《Vue零基础入门教程》第十一课：事件绑定指令

《Vue零基础入门教程》第十二课：双向绑定指令

《Vue零基础入门教程》第十三课：条件渲染

1) 什么是列表渲染

列表渲染也称"循环渲染", 通过v-for遍历数组或者对象

2) 遍历数组

获取元素

如果只希望得到每个数组元素的值, 不需要得到下标

语法

v-for="item in items"

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"><ul><!-- 在指令表达式中, in前面的参数表示数组元素 --><!-- <li v-for="item in items">{{item}}</li> --><!-- (元素, 下标) in 数组 --><li v-for="(value, key) in items">{{key}} -- {{value}}</li></ul></div><script>const { createApp } = Vueconst vm = createApp({data() {return {items: ['test1', 'test2', 'test3'],}},}).mount('#app')</script></body>
</html>

获取元素和下标

如果只希望得到每个数组元素的值和下标

语法

v-for="(item, index) in items"

3) 遍历对象

只取值: v-for="value in obj"
取键和值: v-for="(value, key) in obj"
取键和值和索引: v-for="(value, key, index) in obj"

4) 绑定key

在遍历时, 通常会给每个渲染的元素绑定一个唯一值key

什么是key

key是Vue内置的属性, 不会渲染到DOM中

语法

<li v-for="item in items" :key="item.id">

key的作用

key是vue给每个元素定义的唯一标识, 来用复用DOM

💡 需求

制作一个人员列表, 如下

在输入框中依次输入对应的名字
当点击按钮时, 在列表的最上方添加一个用户: 小强

示例


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"><h1>用户列表</h1><button @click="addUser">添加一个用户</button><ul><li v-for="user in users" :key="user.id">{{user.name}}<input type="text" /></li></ul></div><script>const { createApp } = Vueconst vm = createApp({data() {return {users: [{ id: 1, name: '小明' },{ id: 2, name: '小美' },{ id: 3, name: '小胖' },],}},methods: {addUser() {this.users.unshift({ id: 4, name: '小强' })},},}).mount('#app')</script></body>
</html>

期望的结果