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

在jQuery中：

就是让第一个选中，其他的不选中！

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

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

o((⊙﹏⊙))o

在Vue中快速创建与选中

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

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

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

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

<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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

  • 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中点击active并第一个默认选中功能的实现

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

    在jQuery中: 就是让第一个选中,其他的不选中! 当点击后当前选中,其他不选中. 有一种绕口令:东边的喇嘛买了西边的喇叭 o((⊙﹏⊙))o 在Vue中快速创建与选中 1.遍历出来, 在click中赋值 遍历出来的mx. 2.class进行决定是否显示,一点击就把对应的mx赋到activeName中 3.此时activeName就和mx一模一样的文本,然后返回一个true能显示当前的了 4.把最后一个瑕疵补上, 让第一个默认选中.就是把activeName放一个数值就行了 <template

  • vue中点击切换按钮功能之点启用后按钮变为禁用

    vue中点击切换按钮功能之点启用后按钮变为禁用

    实现方法分位三步: 在template中设置2个按钮,通过v-if ,v-show来控制: data中设置按钮的默认值: methods中控制点击按钮切换效果. <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column fixed prop="date" label="日期" width=

  • 基于Vue中点击组件外关闭组件的实现方法

    Vue定义全局点击函数,参数为点击的回调函数. Vue.prototype.globalClick = function (callback) { //页面全局点击 $(document).click(callback); } 组件挂载后监听全局的点击事件 mounted:function () { this.globalClick(this.handleClickOut); }, 隐藏元素. 取到dom节点,判断父级是否存在来判断是否需要来关闭 handleClickOut:function

  • Vue中点击url下载文件的案例详解

    Vue中点击url下载文件的案例详解

    目录 代码实现 使用 注意 封装自定义指令 将url转成bold,在创建a标签下载blob 代码实现 在src 下面的 directive 文件夹下新建目录 downLoadUrl downLoadUrl / index.js文件 /* * 后端返回文件的url,前端创建a标签来下载 * * 1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题, * 2. 下载文件时,浏览器会有闪动的问题 * * 页面内使用 * 1. 引入指令 import downLoad from

  • vue点击按钮动态创建与删除组件功能

    vue点击按钮动态创建与删除组件功能

    主要功能需求点: 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示 点击右侧创建的组件中的删除按钮,删除对应的组件 删除对应的组件之后,下方的组件位置自动上移 效果图: 代码: 父组件代码(去除了css样式代码): <template> <div class="home"> <div class="container"> <div class="addZujian"> <div>

  • BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)

    废话不多说,直接给大家贴代码了,具体代码如下所示: $('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({ url:'../data/kehulist.json', uniqueId: "id", striped:true, // pagination:true, clickToSelect:true, height:340, columns: [{ field : 'state', checkbox:tr

  • 详解vue中点击空白处隐藏div的实现（用指令实现）

    详解vue中点击空白处隐藏div的实现（用指令实现）

    简单想应该怎么实现? 1.肯定是给document增加一个click事件监听 2.当发生click事件的时候判断是否点击的当前对象 结合着本思路和指令咱们来实现. 简单介绍vue指令 一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中). update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNod

  • Vue下拉框回显并默认选中随机问题

    Vue下拉框回显并默认选中随机问题

    今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些, 因为调用的对象不一样,所以可能会不同,改为相同的之后,发现第一次请求的时间始终比第二次时间短一些,达到想要的效果 总结: 1.因为第一次加载下拉框列表的时候,请求列表中所有数据和列表默认回显数据不同,所以会出现被刷新,而出现回显随机问题,,, PS:vue 运用ElementUI,做select下拉框回

  • vue循环中点击选中再点击取消(单选)的实现

    没有展开时 点击展开之后 <div class="flashread_item_box_time"> <span class="moment_time">9分钟前</span> <div class="flashread_item_box_zan"> <span class="flashread_item_box_item"><i class="ico

  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc

随机推荐