Vue.js 多个 v-on:click 事件

Posted 2023-02-22

【中文标题】Vue.js 多个 v-on:click 事件

【英文标题】：Vue.js multiple v-on:click events

【发布时间】：2017-12-18 01:38:01

【问题描述】：

有没有办法在同一个项目上设置多个 v-on:click 事件？ 我试图同时显示/隐藏切换导航并在切换导航的项目上执行 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>

【问题讨论】：

How to call multiple function with v-on:click的可能重复

【参考方案1】：

你为什么不把第二个事件添加到函数中，像这样：

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