这个问题估计大家很难想到,如果一个数组[1,2,3,4],然后我们v-for遍历,我们改变数组的值,arr[1] = 5 ,难道不应该改变么?按理说根据vue的特性应该是改变的,但是事实上确实数组已经改变了,但是页面上面却没有变化。有三种解决办法。

1.通过7个特定的api方法来实现

push  pop  shift  unshift  splice  sort  reverse

如果我们想要实现上面说的效果就 这样写:vm.list.splice(2,1,5)   //意思是把list这个数组的坐标为二的值开始,删除1个,然后添加一个5

2.通过改变对象地址的方法来实现

说白了就是   vm.list=[1,5,3,4]   重新赋值

3.通过set的方法来实现

Vue.set(vm.list,,)    // Vue  对象
vm.$set(vm.list,,)    // Vue  实例

vue基础篇---修改对象或数组的值,页面实时刷新的更多相关文章

  1. Vue 基础篇

    Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...

  2. 微信小程序:给data中对象中的属性设置值与给data中的属性或对象或数组设置值的区别

    一.给data中的属性或对象或数组设置值,属性名不需要加引号 this.setData({ material: param, // 这里material为对象 } this.setData({   d ...

  3. 小猪猪C++笔记基础篇(四)数组、指针、vector、迭代器

    小猪猪C++笔记基础篇(四) 关键词:数组,Vector. 一.数组与指针 数组相信大家学过C语言或者其他的语言都不陌生,简单的就是同一个变量类型的一组数据.例如:int a[10],意思就是从a开始 ...

  4. vue基础篇---class样式绑定

    因为class的绑定在实际的工作中会经常用到.所以特意记录一下,有好几种方法. 对象绑定方法,另外一个值来控制显示隐藏 <!DOCTYPE html> <html lang=&quo ...

  5. Vue 基础篇---computed 和 watch

    最近在看前端 Vue方面的基础知识,虽然前段时间也做了一些vue方面的小项目,但总觉得对vue掌握的不够 所以对vue基础知识需要注意的地方重新撸一遍,可能比较零碎,看到那块就写哪块吧 1.vue中的 ...

  6. js循环修改对象内层元素的值

    问题:存在一个对象,该对象的内部元素也为对象,子对象的元素也为对象,...(即多层对象构成的对象,具体如下),那么应该如何修改最内层元素的值(如 obj.a.a.a = 5)? var obj = { ...

  7. Vue+WebSocket 实现页面实时刷新长连接

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...

  8. vue 修改对象或数组的属性

  9. VBS基础篇 - Dictionary对象

    Dictionary是存储数据键和项目对的对象,其主要属性有Count.Item.Key,主要方法有Add.Exists.Items.Keys.Remove.RemoveAll. '建立字典 Dim ...

随机推荐

  1. BugPhobia进阶篇章:前端技术/设计文档

    0x01 :前端概述 0x0100 :前端基本描述 前端基础框架 Semantic UI 根据http://semantic-ui.com/提供的样例和文档,依据Version 2.1.4版本的特性进 ...

  2. WinForm(WPF) splash screen demo with C#

    https://www.codeproject.com/Articles/21062/Splash-Screen-Control https://www.codeproject.com/Article ...

  3. TestNG—学习笔记2

    关于TestNG,也是一边学一边总结,对于TestNG和Junit的比较其实也没有什么意义,都是一种测试框架,都是为了应用而生的东西,没有必要说谁好谁不好了.用的熟练用的好就是真的好啊. 下面简单的总 ...

  4. ecshop验证码图片无法显示终极解决办法

    ecshop验证码图片无法显示终极解决办法 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2014-06-06   客户在安装好ecshop之后所有前台的证码不显示,后 ...

  5. QA

    QA:Quality Assurance,品质保证 IDQA:Individual Document Quality Assurance 设计品质保证 QE:Quantitative Easing 质 ...

  6. canvas高斯模糊算法

    对于模糊图片这个效果的实现,其实css3中的filter属性也能够实现,但是这个属性的兼容性不是很好,所以我们通常不用这种方法实现,而使用canvas配合JS实现. <span style=&q ...

  7. 转载《ionic 热更新 cordova-hot-code-push》

    cordova-hot-code-push ,Cordova热代码推送插件提供了在应用程序中执行基于Web的内容的自动更新的功能.使用此插件可以更新存储在项目的www文件夹中的所有内容. cordov ...

  8. 买了本Delphi面向对象编程思想,正在看,产生些问题。

    1:第33页说,Delphi通过调用类的一个构造函数来建立一个对象的实例,对象至少有一个create()的构造函数,使用时候写MyObject:=TmyObject.create即可.   但是第37 ...

  9. 一本通1587【例 3】Windy 数

    1587: [例 3]Windy 数 时间限制: 1000 ms         内存限制: 524288 KB 题目描述 原题来自:SCOI 2009 Windy 定义了一种 Windy 数:不含前 ...

  10. Link-Cut Tree(LCT)&TopTree讲解

    前言: Link-Cut Tree简称LCT是解决动态树问题的一种数据结构,可以说是我见过功能最强大的一种树上数据结构了.在此与大家分享一下LCT的学习笔记.提示:前置知识点需要树链剖分和splay. ...