day02/06.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>添加和删除属性：$set、$delete</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		<button @click="doUpdate">修改属性</button>
		<button @click="doAdd">添加属性</button>
		<button @click="doDelete">删除属性</button>

		<hr>	
		<h2>{{user.name}}</h2>
		<h2>{{user.age}}</h2>
	</div>

	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				user:{
					id:1001,
					name:'tom'
				}
			},
			methods:{
				doUpdate(){
					this.user.name='汤姆'
				},
				doAdd(){
					// this.user.age=25; //通过普通方式为对象添加属性时vue无法实时监视到
					// this.$set(this.user,'age',18); //通过vue实例的$set方法为对象添加属性，可以实时监视
					// Vue.set(this.user,'age',22);
					if(this.user.age){
						this.user.age++;
					}else{
						Vue.set(this.user,'age',1);
					}

					// console.log(this.user);
				},
				doDelete(){
					if(this.user.age){
						// delete this.user.age; //无效
						Vue.delete(this.user,'age');
					}
				}
			}
		});

	</script>
	
</body>
</html>