Vue中点击active并第一个默认选中功能的实现


Posted in Javascript onFebruary 24, 2020

在jQuery中:

就是让第一个选中,其他的不选中!

当点击后当前选中,其他不选中。

有一种绕口令:东边的喇嘛买了西边的喇叭

o((⊙?⊙))o

在Vue中快速创建与选中

1.遍历出来, 在click中赋值 遍历出来的mx。

2.class进行决定是否显示,一点击就把对应的mx赋到activeName中

3.此时activeName就和mx一模一样的文本,然后返回一个true能显示当前的了

4.把最后一个瑕疵补上, 让第一个默认选中。就是把activeName放一个数值就行了

Vue中点击active并第一个默认选中功能的实现

<template>
 <div id="app">
  <ul>
   <li v-for="(mx, key) in list" @click="ck(mx)" :class="[{active: activeName == mx}]">
    {{mx}}
   </li>
  </ul>
 </div>
</template>
<script>
 export default {
  data() {
   return {
    list: ['网易', '腾讯', '爱奇艺', '优酷', '土豆', '斗鱼'],
    activeName: '网易'
   }
  },
  methods: {
   ck(mx) {
    this.activeName = mx
   }
  }
 }
</script>
<style lang="less">
 .box {
  list-style: none;
  text-align: center;
  padding: 0;
  width: 85%;
  margin: auto;
  margin-top: 30px;

  ul {
   list-style: none;
   text-align: center;

   li {
    padding: 15px;
    border-radius: 30px;
   }

   li.active {
    color: red;
    transition: all .8s;
    background: #000;
    color: #fff;
   }
  }
 }
</style>

知识点补充:

exact-active-class 和 active-class 的区别

router-link 默认情况下的路由是模糊匹配,例如当前路径是 /article/1 那么也会激活 <router-link to="/article">,所以当设置 exact-active-class 以后,这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class,例如:

<router-link to="/article" active-class="router-active"></router-link>

当用户访问 /article/1 时会被激活为:

<a href="#/article" class="router-active" rel="nofollow"></a>

而当使用:

<router-link to="/article" exact-active-class="router-active"></router-link>

当用户访问 /article/1 时,不会激活这个 link 的 class:

<a href="#/article" rel="nofollow"></a>

总结

到此这篇关于Vue中点击active并第一个默认选中功能的实现的文章就介绍到这了,更多相关vue点击active内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 #Javascript
浅谈TypeScript的类型保护机制
Feb 23 #Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 #Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 #Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 #Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 #Javascript
原生javascript单例模式的应用实例分析
Feb 23 #Javascript
You might like
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jquery map方法使用示例
2014/04/23 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
蛋糕店的商业计划书范文
2014/01/27 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
班级出游活动计划书
2014/08/15 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
十岁生日答谢词
2015/01/05 职场文书
刘公岛导游词
2015/02/05 职场文书
2015年学校德育工作总结
2015/04/22 职场文书