在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. Drupal theme_hook

    模板语言和主题引擎 用Drupal的行话来说,主题就是一组负责你站点外观的文件.你可以从http://drupal.org/project/Themes下载第 3方主题,或者你可以自己动手创建一个主题 ...

  2. Ubuntu16.04安装Hadoop2.6+Spark1.6+开发实例

    Ubuntu16.04安装Hadoop2.6+Spark1.6,并安装python开发工具Jupyter notebook,通过pyspark测试一个实例,調通整个Spark+hadoop伪分布式开发 ...

  3. 互联网部-供应商团队js规范

    文件命名 页面.js文件命名:采用中划线连接方式,比如说: error-report.html js文件夹命名:scripts 公共js命名:common.js 文件结构组织 每个页面中中独有的js文 ...

  4. 屏幕  z

    private   void   FullScreen()   //全屏      {      SizeMode   =   2;      FormBorderStyle   =   FormBo ...

  5. WAKE-WIN10-SOFT-软件-Matlab配置及工具箱

    1Matlab 1,1Matlab下载,安装,配置,,, 1,2 2工具箱 2,1LibSVM 必应:https://www.bing.com/search?q=libsvm&qs=n& ...

  6. 增加C盘空间大小

    随着我们使用电脑的时间越来越久,电脑C盘的空间会出现不够用的情况,这时我们需要的就是增加C盘的大小,基本上有两种方式 1.通过系统自带的磁盘管理(有可能没法操作,主要介绍第二种) 2.通过分区软件进行 ...

  7. 使用sqlloader向oracle导入文本数据

    文本文件如下,注意文件名必须有后缀,文本行首也需要|分隔符:[oracle@ycr test]$ more person.txt|aaa|123|m|aaa|123|m|aaa|123|m|aaa|1 ...

  8. 使用slmgr查看、删除windows 授权(key)

    查看 slmgr.vbs /dlv 删除授权 使用管理员权限进入cmd All program -> accessories -> Command Prompt (右键 已管理员方式运行) ...

  9. May 09th 2017 Week 19th Tuesday

    Everything you see exists together in a delicate balance. 世上所有的生命都在微妙的平衡中生存. A delicate balance? Can ...

  10. 转载:em(倍)与px的区别

    转载出处:http://www.cnblogs.com/showker/archive/2010/05/24/1742821.html 在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理 ...