vue $set修改对象


在vue开发中,当生成vue实例后,再次给数据赋值时,有时候并不会自动更新到视图上去;

eg:<!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> 手机:{{phone}}<br> 性别:{{sex}}<br> 说明:{{list.instr}} </div>
<script>
var data = { name: "简书", phone: '15736882244', list: { instr: 'my name is Yilia' } } 
//var key = 'instr';
var vm = new Vue({ el:'#app', data: data, ready: function(){
    //Vue.set(data,'sex', '男');
    //this.$set('list.'+key, 'who are you?');

  } }); data.sex = ''</script> </body> </html>

这样运行的结果是

姓名:简书

年龄:15736882244

性别:

说明:my name is Yilia

解决方法是:

Vue.set(data,'sex', '男')

还可以使用 vm.$set实例方法,这也是全局 Vue.set方法的别名:

var key = 'instr'; //这种主要用于当对象中某个属性值动态生成时处理方式
this.$set('list.'+key, 'who are you?');
 或
this.$set('list.instr', 'who are you?');

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM