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绑定事件的主要内容,如果未能解决你的问题,请参考以下文章

Vue-第四天vue.js事件绑定

Vue.js 绑定到名称中带有点的 DOM 自定义事件(如引导事件)

vue样式绑定与事件处理器的基本使用

vue.js的一些事件绑定和表单数据双向绑定

如何在Vue.js中正确添加条件事件绑定?

vue.js 事件绑定