在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>
(本篇完。有疑问欢迎留言探讨, 也可以交个金钱朋友Buy me a coffee)
热门文章
- 微信小程序“拍照识图”上线(46,120)
- vue+tabs动态组件方案漫谈(13,341)
- 基金助手--chrome浏览器插件(13,049)
- 网页打印插件Print.js(11,891)
- px转rem/vw方法小结(7,897)
- 简易的上下循环滚动代码(7,291)
- qq表情在线制作器(7,173)
- 侧边滑出弹层插件mSlider.js(5,555)
- Vue模拟select多选(5,219)
- 前端项目集成工具 ProjectHub(4,944)