在vue开发中,当生成vue实例后,再次给数据赋值时,有时候并不会自动更新到视图上去;

eg:<!DOCTYPE html>

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>vue $set的使用</title>
  5. <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
  6. </head>
  7. <body>
  8. <div id="app">
  9. 姓名:{{ name }}<br>
  10. 手机:{{phone}}<br>
  11. 性别:{{sex}}<br>
  12. 说明:{{list.instr}}
  13. </div>
  14. <script>
  15. var data = {
  16. name: "简书",
  17. phone: '15736882244',
  18. list: {
  19. instr: 'my name is Yilia'
  20. }
  21. }
    //var key = 'instr';var vm = new Vue({
  22. el:'#app',
  23. data: data,
  24. ready: function(){
        //Vue.set(data,'sex', '男');
        //this.$set('list.'+key, 'who are you?');
      }
  25. });
  26. data.sex = '女'
  27. </script>
  28. </body>
  29. </html>

这样运行的结果是

姓名:简书

年龄:15736882244

性别:

说明:my name is Yilia

解决方法是:

  1. Vue.set(data,'sex', '男')

还可以使用 vm.$set实例方法,这也是全局 Vue.set方法的别名:

  1. var key = 'instr'; //这种主要用于当对象中某个属性值动态生成时处理方式
  2. this.$set('list.'+key, 'who are you?');

  3. this.$set('list.instr', 'who are you?');

vue $set修改对象的更多相关文章

  1. [Effective JavaScript 笔记]第48条:避免在枚举期间修改对象

    注册列表示例 一个社交网络有一组成员,每个成员有一个存储其朋友信息的注册列表. function Member(name){ this.name=name; this.friends=[]; } va ...

  2. 3、ObjectARX开发创建直线、圆、圆弧和修改对象属性

    一.本节课程 Arx二次开发创建直线.圆.圆弧和修改对象属性 二.本节要讲解的知识点 1.如何应用C++ ARX二次开发创建直线. 2.如何应用C++ ARX二次开发创建圆. 3.如何应用C++ AR ...

  3. JQuery修改对象的属性值

    JQuery修改对象的属性值 用到的便是JQuery提供的attr方法,获取属性值的基本结构为:$(obj).attr("属性名"):修改属性值的结构为:$(obj).attr(& ...

  4. eclipse 中main()函数中的String[] args如何使用?通过String[] args验证账号密码的登录类?静态的主方法怎样才能调用非static的方法——通过生成对象?在类中制作一个方法——能够修改对象的属性值?

    eclipse 中main()函数中的String[] args如何使用? 右击你的项目,选择run as中选择 run configuration,选择arguments总的program argu ...

  5. promise 里面的 console.info 打印信息 并不准确,后期有修改对象数据,会覆盖,影响之前的显示

    promise 里面的 console.info 打印信息 并不准确,后期有修改对象数据,会覆盖,影响之前的显示

  6. 微信小程序中如何使用setData --- 修改数组对象、修改对象

    看代码吧~ 这是修改对象 this.setData({ allStageIndex: e.detail.value, [`projectDetailsData.stage`]: this.data.a ...

  7. ES6拓展符修改对象

    // ES6 拓展符合并两个对象let ab = { ...a, ...b }; // 等同于 let ab = Object.assign({}, a, b); // 修改对象部分属性.用户自定义的 ...

  8. vue修改对象的属性值后页面不重新渲染

    原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy &l ...

  9. [Web 前端 ] Jquery attr()方法 获取或修改 对象的属性值

    cp from : https://blog.csdn.net/gf771115/article/details/18086707 jquery中用attr()方法来获取和设置元素属性,attr是at ...

  10. EF中修改对象的值的问题。。。(字段超级多的时候)

    一般EF中修改单个对象的值,我是这样处理的. 如:DBEntities db=new DBEntities(); student stu = db.student.firstOrdefault(m=& ...

随机推荐

  1. windows环境下wampserver配置https

    因为公司业务主要是在微信上进行开展的,所以作为程序员的我们每天的开发任务就都是在与微信打交道,这个时候我们就需要在本地配置端口映射到外网,方便我们在微信客户端进行调试. 最近某种需要,所以需要配置 h ...

  2. Java使用imageio、awt生成图片验证码

    1.生成验证码工具类 public class CheckCodeTool { private Integer width = 80; private Integer height = 38; pub ...

  3. windows 服务器时间同步失败处理方法

    服务器的时间同步失败,通过命令行的形式进行处理. 1.编写时间命令行代码 w32tm /config /manualpeerlist:time.windows.com /syncfromflags:M ...

  4. JS 排序:冒泡、 二分搜索 /折半搜索 half-interval search

    冒泡排序:  重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来. var arr = [5,0,-56,900,12]; //大的排序次数 for(var i=0; i& ...

  5. OOA-OOD—OOP

    关于面向对象(OO)程序设计的思想,现在把它记下来. ----OOA Object-Oriented Analysis(面向对象分析方法)是确定需求或者业务的角度,按照面向对象的思想来分析业务.例如: ...

  6. js原型链继承及调用父类方法

    方法1: var Parent= function () { }; Parent.prototype.process = function(){ alert('parent method'); }; ...

  7. 如何查找Authorization object在哪些ABAP代码里使用到

    使用事务码SUIM: 双击where-Used List->Authorization Objects->In Programs: 输入要查找的Authorization Object名称 ...

  8. OC block声明和使用

    #import "Button.h" typedef int (^MySum) (int, int); void test() { // 定义了一个block,这个block返回值 ...

  9. Android(java)学习笔记48:通过反射获得带参构造方法并且使用

    1. 反射获得带参构造方法并且使用: (1)获取字节码文件对象       Class c = Class.forName("cn.itcast_01.Person"); (2)获 ...

  10. Python 函数作为返回值

    函数作为返回值高阶函数除了可以接收函数作为参数外,还可以把函数作为结果值返回. def lazy_sum(*args): def sum(): ax=0 for n in args: ax = ax ...