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


Posted in Javascript onApril 12, 2018

在正常的js中。我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很??拢?苯永纯创?胨祷鞍桑ū硎韭ブ饔玫氖?q):

<style>
  * {
   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;
  }
 </style>
 <script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
</head>
<body>
<ul>
 <li>this is pne</li>
 <li>this is two</li>
 <li>this is three</li>
</ul>
</body>
<script>
 $(() => {
  $("li").click((e) => {
   $("li").removeClass("active");
   $(e.target).addClass("active");
  })
 })
</script>

效果如下图所示:

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

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

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

<template lang="pug">
 ul
  li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is {{item}}
</template>
<style lang="scss">
 li {
  list-style: none;
  width: 100px;
  margin-top: 10px;
  border: 1px solid red;
  &:hover {
   cursor: pointer;
  }
 }
 .active{
  background-color: aqua;
 }
</style>
<script>
 export default{
  data(){
   return {
    classArr: ["one", "two", "three"],
    num:"",
   }
  },
  methods: {
    result(index){
     this.num = index;
    }
  },
  computed:{
    resultNum(){
     return this.num;
   }
  }
 }
</script>

思路如下:

这段代码使用的是index这个关键字,还使用了computed这个计算属性,当当前的index索引与点击的当前元素的下标相同的时候,便会触发active这个类名。说的很简练,不懂的可以加博主一起探讨

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
Vue绑定内联样式问题
Oct 17 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
vue组件的写法汇总
Apr 12 #Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 #jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 #Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 #Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 #Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 #jQuery
Koa项目搭建过程详细记录
Apr 12 #Javascript
You might like
德生1994机评
2021/03/02 无线电
杏林同学录(一)
2006/10/09 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
详解vue-router基本使用
2017/04/18 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python list转矩阵的实例讲解
2018/08/04 Python
django中的图片验证码功能
2019/09/18 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Python 日期与时间转换的方法
2020/08/01 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
车间班组长岗位职责
2013/11/13 职场文书
行政办公室岗位职责
2014/03/18 职场文书
公司人事任命通知
2015/04/20 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
python利用while求100内的整数和方式
2021/11/07 Python