vue.js綁定事件

標籤：lang   app   log   wrapper   hid   text   method   pre   tail   

<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綁定事件