Vue中的$set的使用
在我们使用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的使用的更多相关文章
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
- 七、vue中v-for有时候对页面不会重新渲染，数组变化后如何到渲染页面
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- Vue中之nextTick函数源码分析
Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...
随机推荐
- python各种类型的转换
#进制转换 ord(x) #将一个字符转换为它的整数值 hex(x) #将一个整数转换为一个十六进制字符串 oct(x) #将一个整数转换为一个八进制字符串 #类型转换int(x [,base ]) ...
- bzoj 3207: 花神的嘲讽计划Ⅰ
Description 背景 花神是神,一大癖好就是嘲讽大J,举例如下: "哎你傻不傻的![hqz:大笨J]" "这道题又被J屎过了!!" "J这程序 ...
- ln 命令详解
ln 命令 作用:它的功能是为某一个文件在另外一个位置建立一个同步的链接 参数:必要参数: -b 删除,覆盖以前建立的链接 -d 允许超级用户制作目录的硬链接 -f 强制执行 -i 交互模式, ...
- Java 包装类Integer的值比较
对于包装类型Integer的值比较与int的值比较是不同的: public class Java_Val_Compare { public static void main(String[] ar ...
- 一起学Linux01之环境安装
先说说为什么在公司里服务器用Linux系统而非Windows系统.其实吧,我感觉主要就是前者更靠谱,一个字就是稳!不说别的,就我现在写博客用的电脑没事给我黑个屏,断个网啥的.而且总有漏洞,保不齐就被黑 ...
- sql sever分组查询和连接查询
分组查询select 查询信息 from 表名where 条件group by 按照列分组(可多个 ,隔开)order by 排序方式(查询信息如果列名和聚合函数同时出现,要么在聚合函数中出现,要么就 ...
- x的x次幂的值为10，求x的近似值
public class Main { static double eps = 1e-7; public static void main(String[] args){ double l = 2,r ...
- 简单搭建ES6的环境
一.兼容情况 说到ECMAScript6,顺便提一下ECMAScript5,先看一下ES5的兼容情况.ES5浏览器支持情况: Opera 11.60:Internet Explorer 9*:Fire ...
- Android Ptrace Inject
之前介绍了Android平台上3种常见的hook方法,而hook的前提是进程注入,通过进程注入我们可以将模块或代码注入到目标进程中以便对其空间内的数据进行操作,本篇文章介绍基于ptrace函数的注入技 ...
- dlib人脸关键点检测的模型分析与压缩
本文系原创,转载请注明出处~ 小喵的博客:https://www.miaoerduo.com 博客原文(排版更精美):https://www.miaoerduo.com/c/dlib人脸关键点检测的模 ...