vue的transition

<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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章