vue.js实现点击后动态添加class及删除同级class的实

Vue.js动态添加与删除Class的实现：点击交互下的规格与口味选择

在构建一个点餐选择商品规格的页面时，我们经常需要实现一个功能：当用户点击某个元素时，为其添加class，使其变色，同时删除其他元素的相同class。以下是如何使用Vue.js实现这一功能的具体介绍。

一、页面布局

我们先来构建基本的HTML结构。这里有一个带有规格和口味的商品选择页面。每个规格和口味都有一个``标签，当点击时，会通过Vue的指令来动态改变样式。

```html

```

二、Vue实例与数据绑定

--

接下来，我们创建Vue实例并绑定数据。这里我们定义了两个变量`guigeSpan`和`kouweiSpan`来记录被点亮的元素。

```javascript

var guige = new Vue({

el: 'guige',

data: {

guigeSpan: "-1", // 默认不点亮任何元素

kouweiSpan: "-1" // 默认不点亮任何元素

},

methods: {

guige: function(index) {

// 当点击规格时，点亮对应的元素，并删除其他元素的class

this.guigeSpan = index;

},

kouwei: function(index) {

// 当点击口味时，点亮对应的元素，并删除其他元素的class（逻辑与guige方法类似）

this.kouweiSpan = index;

}

}

});

```

三、效果实现

在上面的代码中，我们使用了Vue的`v-on:click`指令来监听点击事件，并使用`v-bind:class`指令来动态绑定class。当用户点击某个元素时，我们通过改变`guigeSpan`或`kouweiSpan`的值来添加或删除class。这里假设被点亮的元素的class为`on`。

四、总结与致谢

-

以上就是使用Vue.js实现点击后动态添加class及删除同级class的方法。希望对大家有所帮助。如有任何疑问，请留言，我会及时回复。非常感谢大家对狼蚁SEO网站的支持与信任。如果你喜欢这篇文章，请分享给你的朋友，让更多的人了解和使用Vue.js。 长沙网络推广。