<template> <div> <button @click="show">开启</button> <transition> <div v-show="this.tf"> <button @click="hide">关闭</button> </div> </transition> </div> </template> <script> export default { data(){ return{ tf:false } }, methods:{ show(){ this.tf=true }, hide(){ this.tf=false } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style> .box{ width:177px; height:177px; background:rgba(7,17,27,0.8); } .v-enter-active,.v-leave-active{ transition: opacity 0.5s } .v-enter,.v-leave-to{ opacity: 0 } </style>
这种写法就有效果了，这是根据官方文档写的，实现之后效果是这样的
四、结语
这是我最近学习遇到的一些小问题，有时候看视频，别人写的代码照着敲，我们敲完之后可能都还运行不了，这时候有可能是版本问题，框架更新了，语法不一样了等等。现在一些框架更新太快了，对我们这些码农来说确实挺考验的。
您可能感兴趣的文章: