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

eg:<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>vue $set的使用</title>

<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>

</head>

<body>

<div id="app">

  姓名：{{ name }}<br>

    手机：{{phone}}<br>

    性别：{{sex}}<br>

    说明：{{list.instr}}

</div>

<script>

var data = {

    name: "简书",

    phone: '15736882244',

    list: {

        instr: 'my name is Yilia'

    }

}    
//var key = 'instr';var vm = new Vue({

    el:'#app',

    data: data,

    ready: function(){
　　　　//Vue.set(data,'sex', '男'); 
　　　　//this.$set('list.'+key, 'who are you?');
　　}

});

data.sex = '女'；

</script>

</body>

</html>

这样运行的结果是

姓名：简书

年龄：15736882244

性别：

说明：my name is Yilia

解决方法是：

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

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

var key = 'instr'; //这种主要用于当对象中某个属性值动态生成时处理方式

this.$set('list.'+key, 'who are you?');

 或

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. JSP 之 8种HTTP的请求方式 之 页面组成等

    HTTP请求的方法: HTTP/1.1协议中共定义了八种方法(有时也叫“动作”),来表明Request-URL指定的资源不同的操作方式   1.OPTIONS 返回服务器针对特定资源所支持的HTTP请 ...

  2. C#中.Net的值传递和引用传递

    /// <summary> /// 电脑类 /// </summary> public class Computer { public string Type { get; s ...

  3. 字符串安全处理：CRT安全增强以及安全模板重载

    Secure Template Overloads :http://msdn.microsoft.com/en-us/library/ms175759(v=vs.80).aspx Security E ...

  4. SQL Server ->> 重命名数据库

    ALTER DATABASE [oldDB] SET SINGLE_USER WITH ROLLBACK IMMEDIATE GO ALTER DATABASE [oldDB] MODIFY NAME ...

  5. android Handler、Thread和Runnable

    android里面的创建的Handler对象并不是新建一个新的线程,而是在主线程执行,主线程的消息队列中循环. java中实现一个线程有两种方法,一种是继承Thread类,一种是实现Runnable接 ...

  6. sqlserver 带输出参数的存储过程

    --创建存储过程create procedure proc_stu@sname varchar(20),@pwd varchar(50),@flag bit outputasif exists(sel ...

  7. IEEP-网络实施-项目交付流程

    1.项目交付流程 1.1 定义 项目交付流程规定了对项目实施的管理和作业控制要求,保证了工程项目实施按照规定的程序进行 1.2 重要性 1.2.1提高客户满意度 1.2.2 提高工程效率,节约成本 1 ...

  8. poj2253 Frogger dijkstra

    题目大意: 给出n个岛的坐标,前两个坐标分别为A青蛙和B青蛙所在岛的坐标,A青蛙想到达B青蛙所在的岛,A可以从某一个岛跳到任意其它一个岛上,则A到B的每条路径都有一个跳的最远的距离Xi,求这些最远距离 ...

  9. mobile easyui兼容实体数据（tree插件为例）

    ORM的实体类和数据库的类是一一对应的,如果有多级的嵌套循环json返回到前台为了方便展示可以使用mobile easyui,但是mobile easyui又需要特定的属性才可以,比如id,text, ...

  10. codeforces 609E Minimum spanning tree for each edge

    E. Minimum spanning tree for each edge time limit per test 2 seconds memory limit per test 256 megab ...