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

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

回答:

我用的办法比较笨,还是利用的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
}

回答:

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

回答:

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

<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]);
        }
    }
})

回答:

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

然后给 event.currentTarget 元素添加 class

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注