vue.js绑定事件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js绑定事件相关的知识,希望对你有一定的参考价值。
<div class="close-wrapper" @click="hideDetail"> <i class="icon-close"></i> </div>
<div class="detail" v-show="detailShow" > 一些内容 </div>
@click 其实是v-on指令的缩写
<script type="text/ecmascript-6"> export default{ data() { return: { detailShow : false } }, methods: { hideDetail(){ this.detailShow = false; } } } </script>
detailShow默认为false 隐藏
如果想在事件上加上一些css动画效果的话,直接在目标元素上加 transition="";例如
<div class="detail" v-show="detailShow" transition="fade"> 一些内容 </div>
然后定义样式
<style lang="stylus" rel="stylesheet/stylus">
.detail
transition: all 0.5s
&.fade-transition
opacity: 1
background: rgba(7, 17, 27, 0.8)
&.fade-enter,&.fade-leave
opacity: 0
background: rgba(7, 17, 27, 0)
</style>
.fade-transition 是最终状态
.fade-enter和.fade-leave是移入移出的状态
以上是关于vue.js绑定事件的主要内容,如果未能解决你的问题,请参考以下文章