189 8069 5689

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

这篇文章主要介绍了如何使用vue2.0实现点击选中active其他选项互斥的效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联专业为企业提供宁远网站建设、宁远做网站、宁远网站设计、宁远网站制作等企业网站建设、网页设计与制作、宁远企业网站模板建站服务，十多年宁远做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

 
 



    
 
  • this is pne
    • 
 
  • this is two
    • 
 
  • this is three
    •

效果如下图所示：

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

但是在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;
 }

感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用vue2.0实现点击选中active其他选项互斥的效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


本文名称：如何使用vue2.0实现点击选中active其他选项互斥的效果
网页网址：http://cdxtjz.cn/article/pcsigp.html

其他资讯