div id="app">
button @click="update">修改品牌</button>
button @click="add">添加颜色</button>
button @click="del">删除价格</button>
<h1>{{car}}</h1>
<h1>{{person}}</h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
/* 写一个汽车对象 里面汽车的品牌和价格 展示在页面上 你需要实现 写三个按钮
可以实现修改汽车的品牌
添加汽车的颜色 删除汽车的价格 */
new Vue({
el:"#app",
data(){
return {
car:{
pingp:"北京奔驰",
price:"40w"
},
person:{
name:'张三'
}
}
},
methods: {
update(){
this.car.pingp = '华晨宝马'
},
add(){
/* this.car.color = '红色' */
/* console.log(this.car); */
/* $forceUpdate 强制更新视图 特点会把所有的修改过
数据的没有更新视图的，全部更新，很暴力，会影响性能，
不到最后时候，不推荐使用，但是面试的时候如果有人问
添加属性视图不更新怎么办，
要说有两种方法，第一种$set,第二种$forceUpdate */
/* this.$forceUpdate() */
/* this.car.pop = 'pop'
this.$set(this.car,'color','红色') */
/* this.$set触发了当前对象，
也会把其他对象添加的属性渲染到视图上 */
/* this.person.age = 18 */
},
del(){
/* delete this.car.price */
/* this.$forceUpdate(); */
/* this.$set(this.car) */
this.$delete(this.car,'price')
}
},
})
</script>
