在我们使用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. swoole+Redis实现实时数据推送

    <?php /** * *************************************** * 单进程保护 * * ********************************* ...

  2. Redis高可用详解：持久化技术及方案选择

    文章摘自:https://www.cnblogs.com/kismetv/p/9137897.html 前言 在上一篇文章中,介绍了Redis的内存模型,从这篇文章开始,将依次介绍Redis高可用相关 ...

  3. Java 汇编代码

    https://shipilev.net/blog/2015/black-magic-method-dispatch/ https://github.com/shipilev/article-meth ...

  4. Python3求解字符串滤值与百元买百鸡算法

    [本文出自天外归云的博客园] 第一题:给你一个字符串,打印出来前后没有空格,单词之间只有一个空格的字符串. 第二题:公鸡3元/只,母鸡4元/只,小鸡1元3只,给你money元一共多少种买法. 普通版解 ...

  5. 【iCore1S 双核心板_FPGA】例程五：Signal Tapll 实验——逻辑分析仪

    核心代码: //--------------------Module_Signal_TapII-------------------// module Signal_TapII( input CLK_ ...

  6. 安装Node和NPM

      1.node和NPM是什么?   Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js ...

  7. android( java) 处理 null 和 预防空指针异常(NullPointerException) 的一些经验。

    概述: 在实际编码中总是会遇到 空指针异常 ,本文总结了一些处理空指针的个人经验. 原则: 尽早的检查,尽早的失败. 比如: 通过intent传参到新的目标 activity,而且一定需要这个参数,那 ...

  8. const读书笔记

    Const 的使用读书笔记 Const的主要主要用法有: 常变量: const 类型说明符 变量名 常引用: const 类型说明符 &引用名  常对象: 类名 const 对象名 常成员函数 ...

  9. windows下MySQL免安装版配置教程mysql-5.7.24-winx64.zip版本

    一. 以管理员身份运行cmd,进入mysql的bin目录 执行以下代码. #初始化数据库 mysqld --initialize #初始化不会显示密码mysqld --initialize --con ...

  10. nginx 默认访问index.php

    代码 http { include mime.types; default_type application/octet-stream; sendfile on; #tcp_nopush on; #k ...