v-for 遍历数组
使用方法,在想要被放置数据的html元素里,嵌入v-for属性
官方Vue- 列表渲染v-for介绍 v-for遍历什么数组?
- 普通数组数据
- 对象中的数据
- 对象数组
三个demo演示
1.遍历普通数据
我们在遍历基础元素()括号里可以指定两个数组,前面的是数据基本元素,后面是的索引值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历数组</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<li v-for="(data,index) in arr"> 索引为:{{index}},数据为:{{data}} </li>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
arr:[1,2,4,6,7]
}
})
</script>
</html>
2.遍历对象中的数据项
和遍历普通数组差不多,但是我们这里括号里()基本元素组合,前面的为键,后面的是值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<li v-for="(data,index) in arr"> {{index}} : {{data}} </li>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:{
name:"zyh",
age:"20",
sex:"男"
}
}
})
</script>
</html>
3.遍历对象数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr><!-- 最顶的一行三列 -->
<td>编号:</td>
<td>名称:</td>
<td>价格:</td>
</tr>
<tr v-for="(data) in books"><!-- 遍历对象数组 -->
<td>{{data.num}}</td>
<td>{{data.name}}</td>
<td>{{data.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
books:[
{
num:"1",
name:"平凡的世界",
price:"23"
},
{
num:"2",
name:"穆斯林的葬礼",
price:"15"
},
{
num:"3",
name:"红高粱",
price:"69"
},
{
num:"4",
name:"白鹿原",
price:"66"
},
]
}
})
</script>
</html>
另外如果我们需要对数据中的数据进行修改
Vue官方提供了变更方法
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()pop()shift()unshift()-
splice()删除/插入/替换- ar1.splice(2,2),从索引为2的元素开始删除2个元素
- ar1.splice(2),将第三项后的全部删除
- ar1.sprlice(2,0,"aaa"),在索引为2的位置即第三项插入一个aaa元素
sort()reverse()
你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如 example1.items.push({ message: 'Baz' })
<body>
<div id="app">
<ul>
<li v-for="data in moviename">{{data}}</li>
</ul>
<button @click="add">增加</button>
</div>
</body>
<script>
const myvue=new Vue({
el:"#app",
data:{
moviename:["as12","123dd","sa12"]
},
methods:{
add:function(){
this.moviename.push("小明");
}
}
})
</script>关于Vue数据的其他操作以及注意事项可以看Vue官方手册--列表渲染
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/11/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录