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 相关文章推荐
jquery复选框全选/取消示例
Dec 30 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 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为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
python字符串Intern机制详解
2019/07/01 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
企业形象策划方案
2014/05/29 职场文书
调研座谈会发言材料
2014/08/23 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
内勤岗位职责
2015/02/10 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
导游词之安徽九华山
2019/09/18 职场文书
python实现简单反弹球游戏
2021/04/12 Python