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

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

 <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>

效果如下图所示：

但是在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这个类名。说的很简练，不懂的可以加博主一起探讨

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue实现active点击切换方法
  • vue.js默认路由不加载linkActiveClass问题的解决方法
赞 (0)

相关推荐

  • Vue实现active点击切换方法

    循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click="active(index)" 2.将索引值传入class(索引等于几就第几个添加active类) :class="{active:index==ins}" 3.在data里边添加ins:0(表示默认第一个添加active类) data{ ins:0 } 4.最后在methods里边添加方法 ctive (num) { this.ins=num } 非循环的情况: 1.在标签内写入点击

  • vue.js默认路由不加载linkActiveClass问题的解决方法

    vue.js默认路由不加载linkActiveClass问题的解决方法

    发现问题 最近在打开项目的时候,发现我的默认路由没加载上linkActiveClass, 网上一搜,发现很多同学也有这个问题,查了一些资料发现这是个重定向的问题,官网文档是这么写的 https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html 重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path:

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

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

    在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示楼主用的是jq): <style> * { margin: 0; padding: 0; } li { list-style: none; width: 100px; margin-top: 10px; border: 1px solid red; } li:active { cursor: po

  • vue2.0.js的多级联动选择器实现方法

    由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于vue2.0的element-ui中的Cascader级联选择器的样式实现了复合自己要求的多级联动选择器,原理很简单,不多说,直接上代码... <template> <div id="app"> <div class="select"> <div class="input_text"><input typ

  • Vue2.0点击切换类名改变样式的方法

    1.使用index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

  • vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.

  • 基于vue2.0+vuex+localStorage开发的本地记事本示例

    基于vue2.0+vuex+localStorage开发的本地记事本示例

    本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端. 实现效果 功能说明 支持回车添加事件 支持事件状态切换 添加事件 -> 进入未完成列表 未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成 -> 未完成(取消勾选checkbox) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据 支持筛选事件 支持编辑事件 支持删除事件 支持清空所有事件

  • Vue2.0权限树组件实现代码

    Vue2.0权限树组件实现代码

    项目使用的饿了么的Element-Ui,权限树使用其树形控件: <el-tree :data="data" ></el-tree> 刚开始没有特殊需求,三级分支,效果看着还可以.但是接下来的新需求:增加页面操作按钮权限,即达到四级分支,同时要求四级权限布局方式为横向,而且操作按钮权限非固定四级树,但是样式要求一致.这样子就很难操作了,如果单单是四级树为横向,还可以调调样式完成.本来想修改element的tree控件源码来实现,网上查了一些资料,还没有很好的办法生

  • vue2.0多条件搜索组件使用详解

    vue2.0多条件搜索组件使用详解

    本文为大家分享了vue2.0多条件搜索组件的实现方法,供大家参考,具体内容如下 搜索条件为死数据,通过select下拉,选取多个条件:同时可点击加号增加搜索条件,点击减号减少搜索条件: templete <template> <div class="retrievalmian"> <div class="retrievaltitle"> <a class="btn-default tabbtn" @cli

  • vue2.0开发实践总结之入门篇

    vue2.0开发实践总结之入门篇

    vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶),构建工具使用尤大大推出的vue-cli 项目是图片分享社交平台. 项目预览: 1 .vue-cli构建工具必知 我选用的vue-cli 是基于webpack的版本 ,不了解webpack的可以先粗略看下下面的基本知识 webpack 基本知识点: entry:入口点,webpack会从入口点设置的js文件开始对项目进行构建,过程中,所有入口点通过

  • vue2.0与bootstrap3实现列表分页效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 直接引入vue的js文件进行页面渲染分页,不是vuex的哦,以下源码可以直接运行哟^_^ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用vue2.0与bootstrap3进行简单列表分页</title> <link href="http:

  • Vue2.0 实现单选互斥的方法

    Vue2.0 实现单选互斥的方法

    本文介绍了Vue2.0 实现单选互斥的方法,分享给大家,具体如下: 需要实现如上图的功能 1. 首次加载页面,根据data里的catgoryId高亮对应的选项 2. 点击某个选项,该选项高亮,其他去掉高亮 代码结构: <template> <dd @click="changeCategory(currCourseFirst.categoryId)" v-for="currCourseFirst in currCourse.currCourseFirst&qu

随机推荐