vue添加新属性不更新原因
一:
在我们使用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在控制台打印出来会发现:
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教程中有这样一个注意事项:
第一种具体情况如下:
运行结果:
当利用索引改变数组某一项时,页面不会刷新。解决方法如下:
运行结果:
三种方式都可以解决,使用Vue.set、vm.$set()或者数组的splice方法。
在做项目的过程中,有个发现,先上代码:
第一个数组通过利用下标改变第二项,第二个数组使用$set()方法改变第二项,根据上面的代码,我们会知道:第一个数组的第二项改变不会在页面更新,只有第二个数组的更改会在页面更新。然而结果却是:
两个数组的的改变都在页面更新了。。
也就是说,$set()方法调用时,页面会全部更新一遍。
三:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.set使用</title>
<style>
.list .active {
background-color: #E35885;
}
</style>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="getList()">获取列表并添加新属性</button>
<ul class="list" v-if="showList">
<li v-for='(item,index) in List' v-bind:class='{active:item.active}' v-on:click="beActive(index)">{{item.name}}</li>
</ul>
</div>
<script>
Vue.config.devtools = true;
var app = new Vue({
el: '#app',
data: {
showList: false,
List: [{
name: "选项1"
}, {
name: "选项2"
}, {
name: "选项3"
}]
},
methods: {
getList: function() {
let len = this.List.length;
for(let i = 0; i < len; i++) {
this.$set(this.List[i], 'active', false);
}
this.List[0].active = true;
this.showList = true;
},
beActive: function(index) {
let len = this.List.length;
for(let i = 0; i < len; i++) {
this.List[i].active = false;
}
this.List[index].active = true;
}
}
})
</script>
</body>
</html>
---------------------
作者:歪歪100
来源:CSDN
原文:https://blog.csdn.net/weixin_41646716/article/details/81092253
版权声明:本文为博主原创文章,转载请附上博文链接!
vue添加新属性不更新原因的更多相关文章
- vue 数组中嵌套的对象添加新属性--页面更新
vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735
- nodejs操作 mongoose(mongodb)和Sequelize(mysql)查询数据后添加新属性未生效
最近在着手koa时候,发现mongoose(mongodb)查询数据库后添加新属性,前端拿不到新属性问题, 然后测试了一下Sequelize(mysql),发现也有同样的问题存在.此时着手干! 1.1 ...
- vue data对象添加新属性触发视图
<template> <div class="wrap open"> <a>{{test01.name}}</a> <a> ...
- OrCAD Capture CIS 为库里的元器件添加新属性
1.进入元器件编辑界面 2.菜单:Options > Part Properties... 3.在窗口User Properties中,点击按钮New... 4.在弹出的子窗口NewProper ...
- Vue添加新的响应式属性
vm.userProfile = Object.assign({}, vm.userProfile, { age: , favoriteColor: 'Vue Green' })
- js中对象如何添加新属性?
假如登陆需要用户.密码.是否记住密码,那么怎么定义一个对象保存这些信息 1)方法1:声明动态对象 添加属性 //创建obj对象 var obj = new Object(); //为对象添加动态属性 ...
- CoreData 添加新字段
给CoreData添加新属性,就是给数据库加新字段,那么必须要进行数据库版本升级及CoreData数据迁移: 具体操作是 1.选择DemoCoreData.xcdatamodeld 文件,Editor ...
- 针对vue中请求数据对象新添加的属性不能响应式的解决方法
1.需要给对象添加属性时,不能采用传统的obj.属性=值,obj[属性]=值 来添加属性,在vue页面时需要这样使用 this.$set(obj,"propertyName",&q ...
- ASP.NET MVC系列:为已有模型添加新的属性
在模型类Movie中添加一个新的属性Rating
随机推荐
- 聊聊 SQL Joins
SQL 中的 Join 有以下几种类型: 1.Cross Join 交叉连接,没有条件筛选,返回笛卡尔积. 如果以 ,(逗号)分隔表名进行查询如 select * from tbl_name1, tb ...
- Oracle 11g R2(11.2.0.4) RAC 数据文件路径错误解决--ORA-01157 ORA-01110: 数据文件
Oracle 11g R2(11.2.0.1) RAC 数据文件路径错误解决--ORA-01157 ORA-01110: 数据文件 oracle 11g R2(11.2.0.4) rac--scan ...
- paramiko远程
安装paramiko后,看下面例子: 复制代码代码如下: import paramiko #设置ssh连接的远程主机地址和端口t=paramiko.Transport((ip,port))#设置登录名 ...
- Json-lib 进行java与json字符串转换之二
二.list和json字符串的互转 list-->>json字符串 public static void listToJSON(){ Student stu=new Student(); ...
- 关于handler的再次讨论
主要有两个问题,post方法和sendmessage方法有什么不同? 同一个handler对象发送的message只能发送给自己吗? 问题1: post方法,对于Handler的Post方式来说,它会 ...
- docker创建容器打开两个端口
docker run -d -it --name c6_3 -v :/mnt -p 5000:8000 -p 3000 centos 注释: -v 后面为共享文件夹
- ROS Learning-013 beginner_Tutorials (编程) 编写ROS服务版的Hello World程序(Python版)
ROS Indigo beginner_Tutorials-12 编写ROS服务版的Hello World程序(Python版) 我使用的虚拟机软件:VMware Workstation 11 使用的 ...
- css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
- p3584 [POI2015]LAS
传送门 分析 f[i][S](S∈[0,4])表示第iii个食物没有被选/左边选/右边选/同时选的状态是由哪一个状态转移来的 我们需要满足两个条件: 每个人只能选择一个 改变选择之后不会比当前获得热 ...
- 100085G GCD Guessing Game
传送门 题目大意 给定一个数N,现在又一个数x,在1~N之间,现在每次可以猜一个数a,返回gcd(x,a),问说最少猜几次可以确定x. 分析 这个题应该可以算是贪心,但是没人知道这样为啥是对的(雾), ...