视图强制渲染
<body>
<div id="app">
<!-- <h1>{{obj}}</h1>
<button @click="fn1">添加age</button>
<button @click="fn2">删除age</button> -->
<!-- <h1>{{list}}</h1>
<button @click="add">添加benchi</button> -->
<ul>
<li v-for="(v,i) in arr" :key="i" @click="del(i)">{{v}}</li>
</ul>
<button @click="addAge">addAge</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
obj:{
name:'张三'
},
list:[{
car:'bmw',
}],
arr:[{name:'zhangsan'},{name:'lisi'}]
},
methods: {
fn1(){
/* 第一种值和视图都改变的方式 */
// this.$set(this.obj,'age',30)
/* 第二个种更直接更暴力的渲染视图的方式 */
this.obj.age = 30;
this.$forceUpdate();
},
fn2(){
/* 第一种删除对象里面的属性更新视图的方式 */
// delete this.obj.age;
// this.$forceUpdate();
/* 第二种删除对象里面的属性并更新视图的方式 */
/* $delete 第一个参数是 目标对象 第二个参数是 具体的key
要使用字符串*/
this.$delete(this.obj,'age')
console.log(this.obj)
},
add(){
/* 第一种方式 */
// this.$set(this.list,0,{car:this.list[0].car,car2:'benchi'})
this.$set(this.list[0],'car2','benchi')
/* 第二种方式 */
// this.list[0].car2 = 'benchi'
// this.$forceUpdate();
console.log(this.list)
},
addAge(){
// this.arr.forEach(r=>{
// r.age = 30;
// })
// this.$forceUpdate();
this.arr.forEach(r=>{
this.$set(r,'age',30)
})
},
del(i){
/* 删除对象的某一个属性 */
// this.$delete(this.arr[i],'name')
// delete this.arr[i].name;
// this.$forceUpdate();
/* 删除数组的一个对象 */
this.arr.splice(i,1);
this.$forceUpdate();
// this.$delete(this.arr,i)
}
·
},
})
</script>
</body>
插槽
<div id="app">
<child-a>
<h1 slot="gy1">我爱美丽的小公园1</h1>
<h1 slot="gy2">我爱美丽的小公园2</h1>
</child-a>
</div>
<template id="childA">
<div>
<!-- 匿名插槽 <slot></slot> -->
<!-- 具名插槽 -->
<slot name="gy1"></slot>
<h1>我是childA</h1>
<slot name="gy2"></slot>
</div>
</template>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
/* 注册组件的命名是首字母大写 使用组件的时候中间要使用-分割 */
components:{
ChildA:{
template:"#childA"
}
}
})
/* 我有一个模态框组件child 需要显示标题 内容 和底部button */
/* 现在默认只有中间的内容 我需要使用child的时候 插入标题 和底部button
请问怎么实现 */
</script>
