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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Felix的技术分享

用OpenGL构建粒子喷泉

43980
来自专栏web前端教室

vue.js 的组件感觉比react的直观&&面试相关的七个实例

今天的标题有点长,没办法,文章内容都在标题上呢。 //////// 今天上午把vue的组件定义讲完了。组件嘛,向外是扩展功能,向内是封装分治,说来说去都是这些东...

32860
来自专栏AI派

Pandas数据结构详解 | 轻松玩转Pandas(1)

Pandas 有很多高级的功能,但是想要掌握高级功能前,需要先掌握它的基础知识,Pandas 中的数据结构算是非常基础的知识之一了。

11050
来自专栏菜鸟前端工程师

JavaScript学习笔记004-if判断0for循环

12530
来自专栏iKcamp

翻译连载 | 第 11 章:融会贯通 -《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

现在你已经掌握了所有需要掌握的关于 JavaScript 轻量级函数式编程的内容。下面不会再引入新的概念。

14900
来自专栏互联网杂技

基础JavaScript装逼指南

本文秉承着 你看不懂是你sb,我写的代码就要牛逼 的理念来介绍一些js的装逼技巧。 下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,l...

36450
来自专栏数据结构与算法

P2885 [USACO07NOV]电话线Telephone Wire

题目描述 Farmer John's cows are getting restless about their poor telephone service;...

34990
来自专栏C语言及其他语言

[每日一题]数据的插入与重排

炎炎夏日,热浪滚滚,动都不想动的时候不妨来一道C语言的题冷静冷静 题目描述 已有一个已排好的9个元素的数组,今输入一个数要求按原来排序的规律将它插入数组中。 ...

37050
来自专栏带你撸出一手好代码

JavaScript消除游戏实现思路讲解

之前讲解过一款JavaScript贪食蛇游戏详细的设计与实现,但是以那种方式进行描述 , 整篇文章会显得复杂冗长,除非深入细致的阅读和思考,否则文中内容并不容易...

40150
来自专栏程序员互动联盟

写出漂亮代码的七种方法

首先我想说明我本文阐述的是纯粹从美学的角度来写出代码,而非技术、逻辑等。以下为写出漂亮代码的七种方法: 1. 尽快结束 if语句 例如下面这个JavaScr...

32670

扫码关注云+社区

领取腾讯云代金券