在我们使用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>

　　

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

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

  1. 怎么在vue中使用less

    最近使用vue2.0重构项目, 使用vue-cli脚手架构建, 采用webpack模板, 要在项目中使用less进行样式的编写 首先, 打开终端, 在当前项目目录下安装less npm install ...

  2. Vue中的$set的使用

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新 ...

  3. mockjs在vue中的使用

    mockjs在vue中的使用 安装好vue-cli后 加载模块: npm install mockjs 创建mock.js文件到src目录下的任一合适文件内新建mockjs.js,设置好拦截信息,设置 ...

  4. Vue.Draggable/SortableJS 的排序功能，在VUE中的使用

    此插件git: https://github.com/SortableJS/Vue.Draggable 基于Sortable.js http://www.cnblogs.com/xiangsj/p/6 ...

  5. mescroll在vue中的应用

    1.npm install --save mescroll.js 2. <template> <div> <!--全部--> <mescroll-vue re ...

  6. 基于iscroll的better-scroll在vue中的使用

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...

  7. ckeditor5富文本编辑器在vue中的使用

    安装依赖: npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic 要创建编辑器实例,必须首先将编辑器 ...

  8. better-scroll在vue中的应用

    在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 微信 —> 钱包—>滴滴出行”体验效果. 什么是 better-scrol ...

  9. ESLint在vue中的使用

    ESLint的用途 1.审查代码是否符合编码规范和统一的代码风格: 2.审查代码是否存在语法错误:  中文网地址 http://eslint.cn/ 使用VSCode编译器在Vue项目中的使用 在初始 ...

  10. vue中watch的使用

    vue中watch的使用 vue中的watch是一个比较重要的概念,通过他我们可以检测data的变化,下面进行详细的介绍. watch定义方式如下: {[key: string]: string | ...

随机推荐

  1. LeetCode: 476 Number Complement(easy)

    题目: Given a positive integer, output its complement number. The complement strategy is to flip the b ...

  2. HDU3555【数位DP】

    入门...还在学习中,先贴一发大牛博客 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3555 题目大意: 给一个数字n,范围在1~2^63-1,求1~ ...

  3. 详解Codis安装与部署

    Codis github上的介绍安装,里面很全,而且也有中/英文的,只不过按照github的步骤安装,会有一些坑,所以有了这么一篇文章. 在上一篇文章<Redis实用监控工具一览>中,介绍 ...

  4. Eclipse mybatis中XML的自动提示

    1. 从mybatis-3.1.1.jar中解压出dtd文件 2. 3. 复制红线处内容 4. 将上步中内容粘贴到key中

  5. 用css固定textarea文本域大小尺寸

    textarea元素在chrome等浏览器下可以被拖拉从而改变大小,对于查看textarea里面的内容来说相当方便,但是有时候 我们为了保持网页的美观,不得不想要禁掉这个功能,禁止用户随意拉动text ...

  6. JAVA 7新特性——在单个catch代码块中捕获多个异常，以及用升级版的类型检查重新抛出异常

    在Java 7中,catch代码块得到了升级,用以在单个catch块中处理多个异常.如果你要捕获多个异常并且它们包含相似的代码,使用这一特性将会减少代码重复度.下面用一个例子来理解. Java 7之前 ...

  7. SpringBoot | 启动异常 | 显示bulid success 无 error信息

    可能原因是没有添加 web 依赖,检查pom里面是否有web <dependency> <groupId>org.springframework.boot</groupI ...

  8. C# 特性之事件

    事件的本质---特殊的多路广播委托 定义事件: 事件访问修饰符一般为public 定义为公共类型可以使事件对其他类可见 事件定义中还包括委托类型,既可以是自定义委托类型也可以是EventHandler ...

  9. Codeforces Round #533(Div. 2) B.Zuhair and Strings

    链接:https://codeforces.com/contest/1105/problem/B 题意: 给一个字符串和k,连续k个相同的字符,可使等级x加1, 例:8 2 aaacaabb 则有aa ...

  10. 100 Same Tree 相同的树

    给定两个二叉树,写一个函数来检查它们是否相同.如果两棵树在结构上相同并且节点具有相同的值,则认为它们是相同的.示例 1:输入 :      1         1             / \    ...