首页 > 代码库 > vue.js绑定事件
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绑定事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。