在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；

当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码：

<!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>

    年龄：{{age}}<br>

    性别：{{sex}}<br>

    说明：{{info.content}}

</div>

<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->

<script>

var data = {

    name: "简书",

    age: '3',

    info: {

        content: 'my name is test'

    }

}

var key = 'content';

var vm = new Vue({

    el:'#app',

    data: data,

    ready: function(){

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

        //this.$set('info.'+key, 'what is this?');

    }

});

data.sex = '男'；

</script>

</body>

</html>

运行结果：

姓名：简书

年龄：3

性别：

说明：my name is test

为什么会这样呢？当去查对应文档时，你会发现响应系统 ,把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter,如上示例，将data在控制台打印出来会发现：

在age及name都有get和set方法,但是在sex里面并没有这两个方法，因此，设置了sex值后vue并不会自动更新视图；

解决方法：

<script>

var data = {

    name: "简书",

    age: '3',

    info: {

        content: 'my name is test'

    }

}

var key = 'content';

new Vue({

    el:'#app',

    data: data,

    ready: function(){

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

        this.$set('info.'+key, 'what is this?');

    }

});

</script>

1、通过Vue.set方法设置data属性，如上：

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

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

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

this.$set('info.'+key, 'what is this?');

 或

this.$set('info.content', 'what is this?');

vue $set的使用的更多相关文章

  1. webStrom支持Vue

    找到webstorm-->preferences-->fileTypes-->html-->添加+-->*.vue

  2. 初识Vue

    Vue.js介绍 Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另 ...

  3. python 全栈开发，Day88(csrf_exempt,ES6 快速入门,Vue)

    BBS项目内容回顾 1. 登陆页面 1. 验证码 1. PIL(Pillow) 2. io 2. ORM 1. 增删改查 3. AJAX $.ajax({ url: '', type: '', dat ...

  4. Web端主流框架，jquery、angular、react、vue

    不得不说,前端技术发展非常迅速,时不多久就有一个新的东西冒出来,并且迅速膨胀发展,让旁观者眼花缭乱,让开发者目眩神迷,但总体上来说,这波互联网大浪潮带动了前端技术的大发展,给曾经那些苦苦挣扎于DOM操 ...

  5. 前端~HTML~CSS~JavaScript~JQuery~Vue

    HTML CSS JavaScript DOM文档操作 jQuery实例 Vue

  6. @click.native 会触发原生 click事件 vue

    @click.native 会触发原生 click事件 vue

  7. React vs. Angular vs. Vue

    原文连接 历史 React是一个用于构建Web应用程序UI组件的JavaScript库. React由Facebook维护,许多领先的科技品牌在其开发环境中使用React. React被Faceboo ...

  8. Vue.use

    不管是对象还是函数install 是Vue.use()必须要有的方法 否则无法使用(Vue.use(MintUI))但axios 不需要Vue.use(axios) 可以直接使用 因为axios没有i ...

  9. Sublime text3 代码格式化插件vue

    同事用的windows的sublime轻量级容易上手.我们现在强制eslint规范.我们就需要安装这个格式化代码的插件"html-css-js-prettify" 使用 Subli ...

  10. django+vue 基础框架 ：vue

    <template> <div> <p>用户名:<input type="text" v-model="name"&g ...

随机推荐

  1. 11G新特性 -- RMAN Multisection Backups

    Oracle 11g支持以sections的方式来备份和还原数据文件.在section级别进行备份,被称作multisection backup(多段备份).section是一个数据文件中连续的块.m ...

  2. 《转》Babel 入门教程

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  3. Centos7.x 执行top命令教程

    一.作用 top命令用来显示执行中的进程,使用权限是所有用户 二.格式 top [-] [d delay] [q] [c] [S] [s] [i] [n] 三.命令参数解释 d:指定更新的间隔,以秒计 ...

  4. 【九天教您南方cass 9.1】 07 绘制与标注圆曲线和细部点的方法

    同学们大家好,欢迎收看由老王测量上班记出品的cass9.1视频课程 我是本节课主讲老师九天. 我们讲课的教程附件也是共享的,请注意索取测量空间中. [点击索取cass教程]5元立得 (给客服说暗号:“ ...

  5. [NM]打开NetworkManager和wpa_supplicant的DEBUG接口

    turn on the DEBUG log in /etc/NetworkManager/NetworkManager.conf and restart NetworkManager. [loggin ...

  6. [转]理解下DMA/NorFlash/DDR下的Burst是个什么概念

    DMA传送不经过CPU的控制,假如硬盘的数据不能经过DMA控制器读到内存,那么每完成一次将硬盘的数据读出来,再存放到内存的操作,都要通过CPU运行几条读写指令来完成,这时CPU就做不了别的事了,如果有 ...

  7. JVM：从实际案例聊聊Java应用的GC优化

    原文转载自美团从实际案例聊聊Java应用的GC优化,感谢原作者的贡献 当Java程序性能达不到既定目标,且其他优化手段都已经穷尽时,通常需要调整垃圾回收器来进一步提高性能,称为GC优化.但GC算法复杂 ...

  8. .NET Memory Allocation Profiling with Visual Studio 2012

    .NET Memory Allocation Profiling with Visual Studio 2012 This post was written by Stephen Toub, a fr ...

  9. 原 TCP层的分段和IP层的分片之间的关系 & MTU和MSS之间的关系

    首先说明:数据报的分段和分片确实发生,分段发生在传输层,分片发生在网络层.但是对于分段来说,这是经常发生在UDP传输层协议上的情况,对于传输层使用TCP协议的通道来说,这种事情很少发生. 1,MTU( ...

  10. Python 中 __all__ 的作用(转）

    之前看代码每次遇到import *时就会特别蒙,看到这篇文章一下子就弄明白了,原文地址:https://www.cnblogs.com/alamZ/p/6943869.html 1.测试文件foo.p ...