在我们使用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. java 路径分隔符自动适配

    linux文件路径分隔符为 /  ,windows的文件路径分隔符为  \   ,在开发项目过程中不确定用户使用何种操作系统,就需要自动适配路径. 目前已知java提供两种方法获取文件路径分割符: F ...

  2. jmeter源码导入eclipse并完成编译

    其次是去ant官网下载最新版的ant二进制包,安装ant,并配置环境变量ANT_HOME,Path:验证安装是否成功: apache-jmeter-3.0的要求). 1.在eclipse中新建java ...

  3. 【Java】浅谈HashMap

    HashMap是常用的集合类,以Key-Value形式存储值.下面一起从代码层面理解它的实现. 构造方法 它有好几个构造方法,但几乎都是调此构造方法: public HashMap(int initi ...

  4. 【转】Ubuntu FireFox无法播放网页视频音乐的解决办法

    原文:http://www.codeweblog.com/%E8%A7%A3%E5%86%B3qq%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%E5%9C ...

  5. java框架篇---hibernate(一对一)映射关系

    对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发展而产生的,是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术,本质上就是将数据从 ...

  6. java 的nio与io对比

    转:本文并非Java.io或Java.nio的使用手册,也不是如何使用Java.io与Java.nio的技术文档.这里只是尝试比较这两个包,用最简单的方式突出它们的区别和各自的特性.Java.nio提 ...

  7. Unity和Android混合开发

    通用的流程 https://blog.csdn.net/zhangdi2017/article/details/65629589 应用场景 Unity游戏中一些功能需要安卓系统的支持,如搜索wifi等 ...

  8. 聊聊Python中的闭包和装饰器

    1. 闭包 首先我们明确一下函数的引用,如下所示: def test1(): print("--- in test1 func----") # 调用函数 test1() # 引用函 ...

  9. WebRTC 零基础开发者教程（中文版）下载

    WebRTC 简介 WebRTC,是一个支持网页浏览器进行实时语音通话或视频聊天的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术. WebRTC提 ...

  10. debian系列下c++调用mysql， linux下面安装mysql.h文件

    mysql.h的报错还没有解决,你们不用看了,等我解决了吧还不知道什么时候 先用c吧 #include <stdio.h> #include <stdlib.h> #inclu ...