在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. 菜鸟学习Spring——SpringMVC注解版前台向后台传值的两种方式

    一.概述. 在很多企业的开法中常常用到SpringMVC+Spring+Hibernate(mybatis)这样的架构,SpringMVC相当于Struts是页面到Contorller直接的交互的框架 ...

  2. 在linux环境下搭建java web测试环境（非常详细！）

    一.项目必备软件及基本思路 项目必备:虚拟机:VMware Workstation (已安装linux的 CentOS6.5版本) 项目:java web项目 (必须在本地部署编译后选择项目的webR ...

  3. 关于 document.compatMode

    今天查资料时无意发现一个以前没有注意到过的属性:document.compatMode 经过一番资料的查询后,了解到以下信息: 我们都知道IE有两种盒子模型,在不声明 !DOCTYPE 时是混杂模式 ...

  4. blog test

    try my first blog by cnblog. i will record my learn experence in the future.

  5. PHP：使用php，循环html中的select标签与Php数据

    select标签,我们都知道是下拉列表,这里,我们使用foreach循环,将select中的数据进行输出 例子: 1.数据表:mimi_article,表中有个字段,为1或0,表示着是或否 2.通过p ...

  6. CSS基础语法(二) CSS的9种选择器

    样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性 .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素 #id值{ … }  3.标签选择器 ...

  7. MySQL学习（一） 数据表基本操作

    创建数据库:create database db_name 查看数据库结构:show create database db_name 删除数据库:drop database db_name 查看数据库 ...

  8. 用PHP向数据库中实现简单的增删改查（纯代码）

    <?php $con = mysql_connect("localhost:3306","root",""); if (!$con) ...

  9. 笔记本win8系统共享wifi上网方法

    华硕笔记本电脑,安装了win8系统,使用wifi上网,由于连接无线路由的机器太多,超过路由连接数上限,因此转为使用笔记本共享wifi方式给手机上网. 最终上网方式为: 笔记本网卡接入无线路由器上网,笔 ...

  10. git 解决冲突方法

    转载:http://www.cnlvzi.com/index.php/Index/article/id/119 当共享一个项目后提交冲突时 git push -f 强制推送本地的替换服务端 git f ...