Vue 中的列表渲染
1.数组循环
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的列表渲染</ > < src="./vue.js"></ ></head><body> <div id="app"> <div v-for="(item,index) of list"> {{item}} --- {{index}} </div> </div> < > var vm = new Vue({ el:"#app", data:{ list: [ "hello", "dell", "nice", "to", "meet", "you" ] }, }) </ ></body></html>输出：item 是数组内容， index 是数组下标
2.加入 key 值
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的列表渲染</ > < src="./vue.js"></ ></head><body> <div id="app"> <div v-for="(item,index) of list" :key ="item.id"> {{item.text}} --- {{index}} </div> </div> < > var vm = new Vue({ el:"#app", data:{ list: [{ id:"010120201", text:"hello" },{ id:"010120202", text:"Dell" },{ id:"010120203", text:"Lee" }] }, }) </ ></body></html>通常在实际情况中，数据是从后台传来的，其中 id 作为数据唯一的标识符，可以将其设置为 key 值，因为
Key 值必须是唯一的；可以提高性能，但不推荐将 index 设为 key 值
输出：
修改数组内容
数组变异方法
Vue 包含一组观察数组的变异方法（操作数组），所以它们也将会触发视图更新。这些方法如下：
-
push() ---向数组中增加一条 -
pop() ---删除数组最后一项 -
shift() ---删除数组第一项 -
unshift() ---向数组中第一条增加内容 -
splice() ---截取数组中的内容 -
sort() ---对数组中的内容排序 -
reverse() ---对数组中的内容取反
直接修改数组下标和内容不可以更改数组（id 和 内容 并没有变为 “333” 和 “Dell1”）
补充：
方法一：使用数组变异方法
正确方法使用 splice（） 截取一个，删除一个，增加{id:"333",text:"Dell1"}
方法二：改变引用
数组在 JS 中是引用类型，如改变引用则可以实现改变数组内容（直接改变引用内容即可）
方法三：set 方法
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的列表渲染</ > < src="./vue.js"></ ></head><body> <div id="app"> <div v-for="(item,index) of userInfo"> {{item}} </div> </div> < > var vm = new Vue({ el:"#app", data:{ userInfo:[1,2,3,4] }, }) </ ></body></html>输出：
改变内容：1.Vue.set 方法 2.Vue 实例 $set方法
不仅想循环数组，还想循环一个 span 标签
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的列表渲染</ > < src="./vue.js"></ ></head><body> <div id="app"> <div v-for="(item,index) of list" :key ="item.id"> <div> {{item.text}} --- {{index}} </div> <span > {{item.text}} </span> </div> </div> < > var vm = new Vue({ el:"#app", data:{ list: [{ id:"010120201", text:"hello" },{ id:"010120202", text:"Dell" },{ id:"010120203", text:"Lee" }] }, }) </ ></body></html>输出：（在外层必须包裹一层 div）
如果不在外层包裹一层 div（将 div 改为 template）
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的列表渲染</ > < src="./vue.js"></ ></head><body> <div id="app"> <template> v-for="(item,index) of list" :key ="item.id"> <div> {{item.text}} --- {{index}} </div> <span > {{item.text}} </span> </template> </div> < > var vm = new Vue({ el:"#app", data:{ list: [{ id:"010120201", text:"hello" },{ id:"010120202", text:"Dell" },{ id:"010120203", text:"Lee" }] }, }) </ ></body></html>这样的话 最外层 div 就会消失了， template 可以包裹一些元素，但并不会渲染在页面上
对象循环
通过 v-for 也可以对 对象 进行循环
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的列表渲染</ > < src="./vue.js"></ ></head><body> <div id="app"> <div v-for="item of userInfo"> {{item}} </div> </div> < > var vm = new Vue({ el:"#app", data:{ userInfo:{ name:"Dell", age:28, gender:"male", salary:"secret" } }, }) </ ></body></html>输出：
添加 key 值和 index 值
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue 中的列表渲染</ > < src="./vue.js"></ ></head><body> <div id="app"> <div v-for="(item,key,index) of userInfo"> {{item}} --- {{key}} --- {{index}} </div> </div> < > var vm = new Vue({ el:"#app", data:{ userInfo:{ name:"Dell", age:28, gender:"male", salary:"secret" } }, }) </ ></body></html>输出：（key 值 就是 键名， index 就是 键的位置 / 顺序）
更改 对象 内容
添加 对象 内容
直接添加，虽然已经添加到对象中了，但浏览器并不会显示，故此方法无效
有效方法：修改引用（与上文数组方法类同）
有效方法2：Vue.set 方法
有效方法3：Vue 实例 $set方法
继续阅读与本文标签相同的文章
初识 Vue（12）---（Vue中的条件渲染）
初识 Vue（14）---（组件使用中的注意点）
-
SQL--( 初识 MyBatis)
2026-05-26栏目： 教程
-
SQL--(MyBatis 实战）
2026-05-26栏目： 教程
-
初识 Vue（28）---（Vue 中的动画封装）
2026-05-26栏目： 教程
-
初识 Vue（27）---（Vue 中的列表过渡）
2026-05-26栏目： 教程
-
初识 Vue（26）---（ Vue 中多个元素或组件的过渡动画）
2026-05-26栏目： 教程