vue 如何多个元素绑定同一事件

Question

非循环的 动态添加某个class 比如 :class="{active:isActive}"
点击事件 this.isActive=!this.isActive 实现类似toggleClass的功能
但是有很多个元素绑定这一个事件 但是又不能再data里面定义无数个参数 而且这个也不是循环 获取不到当前index
该如何解决呢？

Answer 1

我用的办法比较笨，还是利用的index值，不过换了一种方式看看能不能帮到你：
<p @click="handleClicks(1)" :class="{actives:1===limit}">1</p>
<p @click="handleClicks(2)" :class="{actives:2===limit}" >2</p>
<p @click="handleClicks(3)" :class="{actives:3===limit}">3</p>
<p @click="handleClicks(4)" :class="{actives:4===limit}" >4</p>
<p @click="handleClicks(5)" :class="{actives:5===limit}" >5</p>
<p @click="handleClicks(6)" :class="{actives:6===limit}">6</p>
data(){
limit:0
}

handleClicks(id){
this.limit=id
}

Answer 2

最近在学习过程中也遇到类似问题，看了@虹虹的回答有了点想法，可以点击，但是自己也不确定是不是可以这么写，还望多多指教

<ul>
    <li v-for="(item,index) in items" @click="fn(index)" :class="{on: shows[index]}">{{item}}</li>
</ul>
var app = new Vue({
    el: '#app',
    data: {
        items: 10,
        shows: []
    },
    mounted(){
        for(var i=0;i<this.items;i++){
            this.shows.push(false);
        };
    },
    methods:{
        fn(index){
            Vue.set(this.shows,index,!this.shows[index]);
        }
    }
})

Answer 3

可以试下给父元素绑click事件

然后给 event.currentTarget 元素添加 class

Answer 4

vue鼓励数据驱动，但并非任何场景都适合。很多时候还是要用传统的DOM操作更方便。
比如这些元素都可以绑定到一个名为toggle(this)的事件，然后你在这个事件里通过this访问到此元素，并对其class进行操作。

Answer 5

同疑问,如果是循环出来的元素加事件会比较方便,但是很多时候可能就是几个固定写死的元素,在这些东西上难道一个个手动加事件在行间嘛? 又或者像楼上那种方案在父元素上绑事件做代理?