vue列表渲染(数组和对象)
简单看一下列表渲染(数组列表)
数组列表渲染
< div id="app">
<div v-for="(item,index) in list">
{{item}}-----{{index}}
</div>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
list:["吃饭","上午","睡觉","运动"]
}
})使用for循环list,每一项赋值给item,还可以传递一个index索引!
我们知道这个vue是mvvm模型,数据改变,视图层就改变但是通过实例改变app.list[3]="新设置",发现数据改变了视图层无法改变,那么如何保持数据和视图层改变呢?有三种方式
第一种,重新改变list的数据,进行直接添加
app.list=["吃饭","上午","睡觉","运动","新增数据"]第二种可以使用数组的七中变异方式
数组的七种变异方式
push()pop()shift()unshift()splice()sort()reverse()变异方法实现
app.push("新数据");对象数组渲染
<div id="app">
<div v-for="item of obj">
{{item}}
</div>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
obj:{
name:"test",
age:18,
sex:"男"
}
}
})
</script>当然对象也可以像数组一样传递参数,可以传递三个参数(item,key,index)
<div v-for="(item,key,index) of obj">
{{key}}:{{item}}-------{{index}}
</div>那么我们使用类似于数组的方式给对象新增一项
app.obj.adress="北京"输出app.obj发现数据被添加了,但是视图层没有被渲染!
那么该如何保持同时改变呢?
类似于数组,使用重新赋值结构
obj:{
name:"test",
age:18,
sex:"男",
adress:"北京"
}发现也能可以重新渲染到页面!那么还有什么简单的方式修改吗?当然有可以使用set方法!下一篇来说一下set方式修改列表渲染(数组和对象)
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录