Vue.js多个v-on:点击事件

时间:2017-07-13 10:18:50

标签: javascript vue.js

有没有办法让多个v-on:在同一个项目上点击活动? 我试图显示/隐藏切换导航并在切换导航的项目上执行css动画。

<template>
   <div>
        <nav v-if="seen">
            <ul>
                <li><a href="#front" v-smooth-scroll>forside</a></li>
                <li><a href="#services" v-smooth-scroll>ydelser</a></li>
                <li><a href="#cases" v-smooth-scroll>cases</a></li>
                <li><a href="#contact" v-smooth-scroll>kontakt</a></li>
            </ul>
        </nav>
        <div @click="seen = !seen" @click="setActive" id="burger-container">
           <div id="burger">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
           </div>
        </div>    
    </div>
</template>

<script>
    export default {
      data () {
        return {
          seen: false
        }
      },
      methods: {
        setActive (event) {
          event.target.classList.toggle('open')
        }
      }
    }
</script>

1 个答案:

答案 0 :(得分:2)

为什么不直接将第二个事件添加到函数中,如下所示:

methods: {
    setActive (event) {
      event.target.classList.toggle('open')
      this.seen = !this.seen
    }
  }