在我们使用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. tensorflow weight_variable going

    # coding: utf-8 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data d ...

  2. 新浪微博分享出现libc++abi.dylib: terminating with uncaught exception of type NSException微博微信SDK运行编译报错

    SDK出现libc++abi.dylib: terminating with uncaught exception of type NSException  的问题: 解决方法 结合 # 监测bug( ...

  3. TextBox禁用与启用的方法

    $('#text1').textbox('enable');// 启用 $('#text1').textbox('disable');// 禁用 注:以上方法也适用于datebox等等

  4. VR头盔产品镜片评测

    2015-07-21 16:59 原创 Randy Orton http://www.leiphone.com/news/201507/7j46BjWsSitKML13.html 虚拟现实设备自从去年 ...

  5. P5137 polynomial(分治)

    传送门 神仙--这题有毒-- 一直在那里考虑没有逆元怎么办然后考虑解exgcd巴拉巴拉 最后只好看题解了 而且这题龟速乘都不行--得用代码里那种叫人半懂不懂的方式取模-- //minamoto #in ...

  6. python中的os.path.dirname与os.path.dirname(__file__)的用法

    python中的os.path.dirname的用法 os.path.dirname(path) 语法:os.path.dirname(path) 功能:去掉文件名,返回目录 如: print(os. ...

  7. ssrs 小技巧

    1. 使用 RowNumber() 增加行号 =RowNumber("DataSet1") 2. 单双行 变色 =iif(RowNumber(Nothing) Mod 2, &qu ...

  8. 关于gc日志中Desired Survivor的疑问和对象晋升老年代的小结

    问题背景 (下面的所有内容都是根据书上的Serial/Serial Old收集器下的情况) 在<深入理解JVM>一书中的——3.6.3长期存活的对象将进入老年代的介绍中, 一个例子的jvm ...

  9. 04.Javascript——入门一些方法记录之iterable

    遍历Array可以采用下标循环,遍历Map和Set就无法使用下标.为了统一集合类型,ES6标准引入了新的iterable类型,Array.Map和Set都属于iterable类型. 具有iterabl ...

  10. Linux磁盘根目录满了问题解析

    linux里的log文件被删除后,空间没有被释放,是因为在Linux系统中,通过rm或者文件管理器删除文件将会从文件系统的目录结构上解除链接(unlink).然而如果文件是被打开的(有一个进程正在使用 ...