<template>
<div>
<button @click="change()">隱藏</button>
<button @click="yes()">顯示</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
show: true,
}
},
methods: {
change(){
this.show=false
},
yes(){
this.show=true
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>