在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. 详解JavaScript UTC时间转换方法

    这篇文章主要介绍了JavaScript UTC时间转换方法,介绍了本地时间到UTC时间的转换.UTC日期到本地日期的转换,感兴趣的小伙伴们可以参考一下 一.前言 1.UTC: Universal Ti ...

  2. Weka:call for the EM algorithm to achieve clustering.(EM算法)

    EM算法: 在Eclipse中写出读取文件的代码然后调用EM算法计算输出结果: package EMAlg; import java.io.*; import weka.core.*; import ...

  3. cordova 开发 android app 简要流程

    1. 安装cordova:npm install -g cordova --registry=https://registry.npm.taobao.org 2. 创建cordova工程:进入工作目录 ...

  4. 《ArcGIS Runtime SDK for Android开发笔记》——离在线一体化技术:离线矢量数据同步

    1.前言 上一篇文章中我们实现了离线要素的编辑操作,这一篇中主要介绍离在线一体化技术中最后一个环节离线数据的同步功能,通过对数据的上传,服务器端的版本化管理,实现数据生产管理的整个流程. 转载请注明出 ...

  5. git 无法忽略Android Studio 生成的 .idea目录解决办法

    在Android Studio中导入了别的人Gradle项目,产生了 .idea文件夹, 然后git 发现了这个变动,修改了 .gitignore不起作用,仍然不能忽略这个文件夹 在项目目录里面 右键 ...

  6. python25 python的三目运算符

    其他语言的三目运算符大类似: 条件 ?  条件为真返回值: 条件为假返回值 python不一样: 条件为真的返回值  if  条件  else  条件为假的返回值                 或者 ...

  7. 【[NOI2006]最大获利】

    题目 并不知到为什么这道题讲了这么久 我们发现这道题就是最小割的板子啊,完全可以套上文理分科的板子 把每个机器和\(T\)连边,容量为\(p_i\),这些\(p_i\)并不计入总贡献 对于每一个要求我 ...

  8. 单独使用JDBC编程

    一.jdbc编程步骤 1. 加载数据库驱动 2. 创建并获取数据库链接 3. 创建jdbc statement对象 4. 设置sql语句 5. 设置sql语句中的参数(使用preparedStatem ...

  9. labelme也可以标注polygan

    https://blog.csdn.net/wc781708249/article/details/79595174 按照这个安装就可以了 sudo apt-get install python-qt ...

  10. idea原生ajax数据处理(增删改查)

    项目名称:Bookstore UI界面 项目文件 操作: jsp代码 <%@ page import="dao.BookDAO" %> <%@ page impo ...