用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 相关文章推荐
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
使用JS读秒使用示例
Sep 21 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python实现归并排序算法
2018/11/22 Python
python实现支付宝转账接口
2019/05/07 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
PHP如何自定义函数
2016/09/16 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
党支部公开承诺书
2014/03/28 职场文书
计划生育宣传标语
2014/06/21 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
坎儿井导游词
2015/02/09 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
如何用python反转图片,视频
2021/04/24 Python
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
Go 中的空白标识符下划线
2022/03/25 Golang