用vue2.0实现点击选中active其他选项互斥的效果
网络编程 2025-03-29 21:02www.168986.cn编程入门
Vue实现点击选中active其他选项互斥的效果详解
在Web开发中，实现点击一个元素使其变为活动状态（active），而其他元素失去活动状态是一种常见的交互方式。长沙网络推广认为这种效果非常实用，今天就来详细介绍一下如何使用Vue 2.x来实现这种效果。
在传统的JavaScript中，要实现这种效果，可能需要定义一个类名，当点击某个元素时，先给所有元素移除这个类名，再给当前元素添加这个类名。这个过程相对繁琐。
而在Vue中，由于推崇数据驱动视图的方式，我们可以通过数据绑定和指令来实现这个效果，而不需要直接操作DOM。
以下是一个简单的例子：
我们在``中定义一个列表，每个列表项都绑定一个点击事件`@click`，并且使用`:class`绑定一个计算属性`resultNum`，用于判断是否将当前项设置为active状态。
```html
ul
li(v-for="(item, index) in classArr", @click="result(index)", :class="{'active': resultNum === index}") this is {{item}}
```
接着，在`
```
在`