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更改class和id的方法
Oct 10 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
创建与框架无关的JavaScript插件
Dec 01 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 动态执行带有参数的类方法
2009/04/10 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
php数组删除元素示例
2014/03/21 PHP
php实现的简单日志写入函数
2015/03/31 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
js实现随机抽奖
2020/03/19 Javascript
js实现小时钟效果
2020/03/25 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python注释详解
2016/06/01 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
PyQt5响应回车事件的方法
2019/06/25 Python
python中使用np.delete()的实例方法
2021/02/01 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
自荐信格式范文
2013/10/07 职场文书
公司门卫管理制度
2014/02/01 职场文书
师德师风建设方案
2014/05/08 职场文书
干部鉴定材料
2014/05/18 职场文书
学校教学工作总结2015
2015/05/19 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
python如何为list实现find方法
2022/05/30 Python