有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue中this.$set 和 $delete 的用法

vue 炮渣日记 4周前 (11-10) 14次浏览 已收录 0个评论 扫描二维码
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
<div id="app">	
	<h1>{{obj.name}}</h1>
 <p>{{obj.sex}}</p>
	<p>{{obj.age}}</p>
	<button v-on:click="update()">update</button>
	<button v-on:click="add()">add</button>
	<button v-on:click="cut()">del</button>
</div>

<script>
new Vue({
	//在data的对象或数组对象中添加新的属性的值,不会触发视图更新,需要使用$set $delete
	el:'#app',
	data:{
		obj:{name:'jiajia',sex:'女'}		
	},
	methods:{
		update:function(){
			this.obj.name="佳佳"
		},
		add:function(){
			//this.obj.age=18; //不会触发视图渲染 ,但数组中已经存在了
			// this.$set(target,key,value)三个参数
			this.$set(this.obj,'age',20); //触发视图渲染
			console.log(this.obj)
		},
		cut:function(){
			//delete this.obj.name; //不会触发视图渲染 但实际已经数组中已不存在
			this.$delete(this.obj,'sex'); //触发视图渲染
			console.log(this.obj);
		}
	}
})
</script>
Vue中this.$set 和 $delete 的用法
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址