在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的dom取消active的类，给当前元素加上这个类名，说的很啰嗦，直接来看代码说话吧（表示楼主用的是jq）:
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
}
li:active {
cursor: pointer;
}
.acti
在Vue 2.0中，实现点击选中某一项并使其他项互斥的效果，我们需要遵循Vue的设计哲学，即避免直接操作DOM。Vue提供了一种更优雅的方式，通过数据驱动视图来处理这类问题。在给出的例子中，我们可以通过绑定类名、事件监听和计算属性来实现这个功能。
我们创建一个列表数据，如`classArr`，它包含了多个选项的文本。在Vue组件的`data`选项中定义这个数组：
```javascript
data() {
return {
classArr: ["one", "two", "three"],
selectedIndex: -1, // 初始时没有选中项
};
},
```
接着，我们编写模板部分。这里使用Pug模板引擎，不过同样可以使用普通的HTML。我们将循环遍历`classArr`，为每个列表项绑定一个`@click`事件处理函数`result(index)`，同时使用`:class`指令根据当前选中项的索引来决定是否添加`active`类：
```pug
template(vue-lang="pug")
ul
li(v-for="(item, index) in classArr", @click="result(index)", :class="selectedIndex === index ? 'active' : ''")
| this is {{ item }}
```
在CSS部分，我们定义`active`类的样式，使其在选中时具有不同的背景颜色：
```css
li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
&:hover {
cursor: pointer;
}
}
.active {
background-color: aqua;
}
```
在`methods`选项中，我们定义`result(index)`方法，当点击列表项时，将`selectedIndex`设置为当前被点击项的索引：
```javascript
methods: {
result(index) {
this.selectedIndex = index;
},
},
```
由于`selectedIndex`的值会随着用户交互而变化，我们可以使用一个计算属性`resultNum`来简化模板中的逻辑。计算属性会根据依赖的数据自动更新，因此在这里我们不需要手动去管理`active`类的状态：
```javascript
computed: {
resultNum() {
return this.selectedIndex;
},
}
```
现在，当用户点击某个列表项时，`result`方法会被调用，`selectedIndex`会更新为相应的索引。这会导致`resultNum`计算属性也更新，进而影响模板中`:class`指令的判断，从而实现只有一项具有`active`类的效果，其他项则取消选中状态。这就是在Vue 2.0中实现点击选中并互斥的一种常见方法。这种方法避免了直接操作DOM，使得代码更简洁，也更符合Vue的编程模式。
