在我们使用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. VS Supercharger插件

    一.前言 Supercharger 是 VS 的一款插件,针对代码进行优化和着色,便于观察和区分. 二.下载及安装 下载的 URL 如下:Supercharger 下载地址 点击下载,下载完成以后,那 ...

  2. java基础第二篇

    3.选择结构 a.if: 格式一: if(表达式1){ 表达式1为真才执行 } 格式二: if(表达式1){ 表达式1为真才执行 }else{ 表达式1位假才执行 } 格式三:判断工龄的范围,判断成绩 ...

  3. eclipse svn 相关

    eclipse本身带有cvs插件,我们也可以在eclipse里面加上svn插件,请参考eclipse安装svn插件,以及使用,但是在eclipse的左边栏,.svn,.cvs的文件会显示出来,目录拉的 ...

  4. 一个致命的 Redis 命令，导致公司损失 400 万

    什么样的 Redis 命令会有如此威力,造成如此大的损失? 具体消息如下: 看完这个消息后,我心又一惊,为什么这么低级的问题还在犯?为什么线上的危险命令没有被禁用?这事件报道出来真是觉得很低级... ...

  5. D - Fliptile

    #include <stdio.h> #include <iostream> #include <math.h> #include <algorithm> ...

  6. JSP | 基础 | Button跳转页面

    <input type = "button" value = "登陆" onclick = "window.location.href = 'L ...

  7. Linux —— 文件搜索命令

    文件搜索命令(配置文件/etc/updatedb.conf) locate 文件名 搜索速度非常快 在后台数据库中按照文件名搜索 updatedb 更新数据库 只可以按照文件名搜索 whereis 命 ...

  8. python 多继承（新式类） 三

    深入super 一下内容引用自:http://www.cnblogs.com/lovemo1314/archive/2011/05/03/2035005.html,写的挺好的. 代码段3 class ...

  9. Rabbitmq~linux环境的部署

    之前写过在windows环境上部署rabbitmq,这回介绍在centos上对这个消息中间件进行部署的过程 一 下载和解压 wget  http://www.rabbitmq.com/releases ...

  10. 安装linux时的分区问题，需要了解目录树及挂载知识

    Linux是目录树架构,如何结合目录树架构与磁盘内的数据→挂载. Linux先有目录,后有磁盘分区.数据(文件)依存于目录. 目录为挂载点,磁盘分区的数据放置在该目录下,进入该目录,就可以读取该分区. ...