``` <template> <div> <button @click="funClick">顯示隱藏</button> <!--第二種操作--> <button @click="isShow = !isShow">Toggle</button> <transition name="fade"> <div v-show="isShow"> <ul> <li>11111</li> <li>22222</li> <li>33333</li> </ul> </div> </transition> </div> </template> ``` ``` <script> export default { data() { return { isShow: false, } }, methods: { funClick() { this.isShow = !this.isShow; }, } } </script> ``` ``` <style scoped> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> ```