在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. ASP.NET MVC 音乐商店 - 0 概览

    这是一个系列文章,原文内容出自微软的 MusicStore. 首先对原文内容进行了简单的翻译,以方便大家参考,另外对于其中的部分内容,也进行了简单的分析,使用的 Visual Studio 也换成了中 ...

  2. 实现两个N×N矩阵的乘法，矩阵由一维数组表示

    此题的关键在于找到矩阵乘法的不变式! 例如: 矩阵a × 矩阵b = 矩阵ab 1 2 5 6 × 3 4 7 8 显然 ab[0] = a[0] * b[0] + a[1] * b[2] ab[1] ...

  3. 1.GlusterFS 初识

    一. GlusterFS 初始 1.1 分布式文件系统出现 计算机通过文件系统管理.存储数据,而现在数据信息爆炸的时代中人们可以获取的数据成指数倍的增长,单纯通过增加硬盘个数来扩展计算机文件系统的存储 ...

  4. 实验验证stack和heap中是否被设初值

    #include <iostream> #include <stdlib.h> using namespace std; class Foo { public: int i; ...

  5. vue 单页应用中微信支付的坑

    vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...

  6. 微信小程序开发实践

    目录 项目是否适合移植到小程序上? 概要介绍 实践得到的经验 规则 小程序不支持的 新特性 小窍门 会话管理 进阶 项目是否适合移植到小程序上? 小程序由于微信提供了一些组件,在微信中的一些体验确实不 ...

  7. HXXXES 高可用双机RMAN异地备份 Notes

    一.总览 大致上的逻辑如上图,简化细节来归纳,便是 用一个bat脚本来驱动整个备份过程.   二.一些准备工作 1.为备份所需的脚本,以及最终备份生成的文件创建目录    开始=>运行=> ...

  8. jquery.dataTables列中内容居中问题?求解？

    .table > tbody > tr > td {  vertical-align: middle; }

  9. 动态规划(DP)，Human Gene Functions

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1027 http://poj.org/problem?id=108 ...

  10. springboot（服务端接口）获取URL请求参数的几种方法

    原文地址:http://www.cnblogs.com/xiaoxi/p/5695783.html 一.下面为7种服务端获取前端传过来的参数的方法  常用的方法为:@RequestParam和@Req ...