这次给大家带来vue2.0选中active后其他选项互斥实现步骤，vue2.0选中active后其他选项互斥的注意事项有哪些，下面就是实战案例，一起来看一下。
在正常的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; } - this is pne
- this is two
- this is three
登录后复制
效果如下图所示：
但是在vue里面，是不提倡进行dom操作的，如果非进行dom的话，vue2.0里面有一个ref的属性，是可以达到dom的效果的。那么接下来我们不接住dom来进行操作：
由于习惯了webpack和vue-cli脚手架，所以楼主所有vue的代码都是放在webpack的脚手架当中进行，还使用了pug和scss的预处理器，vue的代码如下：
ul li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is {{item}} li { list-style: none; width: 100px; margin-top: 10px; border: 1px solid red; &:hover { cursor: pointer; } } .active{ background-color: aqua; } export default{ data(){ return { classArr: ["one", "two", "three"], num:"", } }, methods: { result(index){ this.num = index; } }, computed:{ resultNum(){ return this.num; } } }
登录后复制
思路如下：
这段代码使用的是index这个关键字，还使用了computed这个计算属性，当当前的index索引与点击的当前元素的下标相同的时候，便会触发active这个类名。说的很简练，不懂的可以加博主一起探讨
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
angular实现页面局部打印步骤详解
vuex使用步骤详解（附代码）
以上就是vue2.0选中active后其他选项互斥实现步骤的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2766376.html
