在我们使用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. 如何生成ExecutionGraph及物理执行图

    http://chenyuzhao.me/2017/02/06/flink%E7%89%A9%E7%90%86%E8%AE%A1%E5%88%92%E7%94%9F%E6%88%90/ https:/ ...

  2. 【iCore1S 双核心板_FPGA】例程十二：基于单口RAM的ARM+FPGA数据存取实验

    实验现象: 核心代码: module single_port_ram( input CLK_12M, input WR, input RD, input CS0, inout [:]DB, input ...

  3. (转载)完成端口(Completion Port, I/OCP)详解

    http://www.cnblogs.com/lancidie/archive/2011/12/19/2293773.html 手把手叫你玩转网络编程系列之三    完成端口(Completion P ...

  4. ( 转 )超级惊艳 10款HTML5动画特效推荐

    今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些HTML5动画和jQu ...

  5. Python中类的特殊变量

    特殊变量 类似__xx,以双下划线开头的实例变量名,就变成了一个私有变量(private),只有内部可以访问,外部不能访问: 类似__xx__,以双下划线开头,并且以双下划线结尾的,是特殊变量,特殊变 ...

  6. Service 中的 onStart 和 onStartCommand

    在自定义的service中,写了onStart和onStartCommand, public class HttpWebService extends Service { @Override publ ...

  7. ASP.NET实现从服务器下载文件问题处理

    假设在服务器的根目录下有个名为Download的文件夹,这个文件夹存放一些提供给引用程序下载的文件    public void DownloadFile(string path, string na ...

  8. [Laravel] 07 - Project: functions in Controller

    故事背景 一.项目预览 From: https://www.imooc.com/video/12521 表单操作 一.新增信息 既然是操作,自然会想到:控制器. 控制器  [1] 路由 ----> ...

  9. oracle学习笔记1（环境搭建）

    学习的开始先剧透一下,本人有点笨,本来想用oracle vbox,装个red hat+oracle,但是虚拟机一直报错,0x00000000内存不能written.所以便想到其他的办法,刚好接触了go ...

  10. 如何在Ubuntu 14.04 中使用Samba共享文件

    1.安装 Samba 和图形配置工具 sudo apt-get install samba samba-common system-config-samba python-glade2 gksu 2. ...