用vue2.0实现点击选中active其他选项互斥的效果

发布时间：2020-12-17 02:20:31 所属栏目：百科来源：网络整理

导读：在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的dom取消active的类，给当前元素加上这个类名，说的很啰嗦，直接来看代码说话吧（表示楼主用的是jq）: this is pne this is two this is three 效

在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的dom取消active的类，给当前元素加上这个类名，说的很啰嗦，直接来看代码说话吧（表示楼主用的是jq）:

* { margin: 0; padding: 0; }

li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
}

li:active {
cursor: pointer;
}

.active {
background-color: aqua;
}

效果如下图所示：

但是在vue里面，是不提倡进行dom操作的，如果非进行dom的话，vue2.0里面有一个ref的属性，是可以达到dom的效果的。那么接下来我们不接住dom来进行操作：

由于习惯了webpack和vue-cli脚手架，所以楼主所有vue的代码都是放在webpack的脚手架当中进行，还使用了pug和scss的预处理器，vue的代码如下：