Vue修改数组对象的更新问题
2017-08-25 | 5,811浏览 | 0评论 | 标签:vue
在Vue中,对变量(数组对象)进行修改,有时并不会立即渲染在模板中,但打印发现变量确实已被修改。此时需要注意修改的方式,现总结备忘。
官方说明:https://cn.vuejs.org/v2/guide/reactivity.html
demo:
<style>
.main span{
color: red;
}
</style>
<div id="app" class="main">
<h3>修改代码后,点击运行预览效果:</h3>
<p>obj:<span>{{obj}}</span></p>
<p>arr: <span>{{arr}}</span></p>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
obj: {},
arr: []
}
},
mounted() {
/*
* Object
*/
// this.obj.name='DH'; // x
// delete this.obj.name; // x
// this.obj={name:'DH'}; // √
// this.obj = Object.assign({}, this.obj, {name: 'DH'}); // √
// this.$set(this.obj,'name','DH'); // √
/*
* Array
*/
// this.arr[0]='a'; // x
// this.arr.length=0; // x
// this.$set(this.arr,0,'a'); // √
// this.arr.push('a'); // √
// 同shift、unshift、pop、splice、slice、concat...
}
});
</script>
(本篇完。有疑问欢迎留言探讨)
热门文章
- 微信小程序“拍照识图”上线(63,409)
- YouTube评论翻译插件《油管评论翻译机》上线了(58,519)
- 基金助手--chrome浏览器插件(44,508)
- 拍照识别彩票结果在线工具(31,664)
- vue+tabs动态组件方案漫谈(26,268)
- 《油管评论翻译机》使用说明书(24,412)
- 网页打印插件Print.js(23,794)
- 自用YouTube抓取评论+翻译工具(23,083)
- px转rem/vw方法小结(17,507)
- YouTube评论导出免费在线工具(17,475)