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方式修改列表渲染(数组和对象)

本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《vue列表渲染(数组和对象)
分享到:更多

相关推荐

未登录,暂时无法评论和查看评论!

点击这里给我发消息点击此处联系博主!