< html lang= "en" >
< head >
<meta charset="UTF-8">
<title>Vue</title>
<link rel="stylesheet" href="./main.css">
<script src="./vue.js"></script>
<style>
.v-enter,.v-leave-to{
opacity:0
}
.v-enter-active,.v-leave-active{
transition: opacity 2s ease .1s
}
</style> < / head >
< body >
<h1>Vue</h1>
<hr>
<div id="app">
<fade :visible="visible">
<div>16</div>
</fade>
<button @click="handleClick"></button>
</div>
<script>
Vue.component("fade",{
props:["visible"],
template:`
<transition>
<slot v-if="visible"></slot>
</transition>
`
})
var vm = new Vue({
el:"-sharpapp",
data:{
visible:true,
},
methods:{
handleClick(){
console.log(55);
this.visible=!this.visible
}
}
})
</script> < / body >
< / html >
Code as above, in the < slot vwaff colors visible < / slot > code, the definition of v-show on the slot slot does not take effect, but the definition of v-if takes effect. What is the reason for this? please explain it. Thank you
.