Vue中點擊active并第一個默認(rèn)選中功能的實現(xiàn)

更新時間：2020年02月24日 08:18:10 作者：趙不悔

這篇文章主要介紹了Vue中點擊active并第一個默認(rèn)選中功能的實現(xiàn)代碼，代碼簡單易懂，非常不錯具有一定的參考借鑒價值,需要的朋友可以參考下

在jQuery中：

就是讓第一個選中，其他的不選中！

當(dāng)點擊后當(dāng)前選中，其他不選中。

有一種繞口令：東邊的喇嘛買了西邊的喇叭

o((⊙﹏⊙))o

在Vue中快速創(chuàng)建與選中

1.遍歷出來，在click中賦值遍歷出來的mx。

2.class進行決定是否顯示，一點擊就把對應(yīng)的mx賦到activeName中

3.此時activeName就和mx一模一樣的文本，然后返回一個true能顯示當(dāng)前的了

4.把最后一個瑕疵補上，讓第一個默認(rèn)選中。就是把activeName放一個數(shù)值就行了

<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: ['網(wǎng)易', '騰訊', '愛奇藝', '優(yōu)酷', '土豆', '斗魚'],
    activeName: '網(wǎng)易'
   }
  },
  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 的區(qū)別

router-link 默認(rèn)情況下的路由是模糊匹配，例如當(dāng)前路徑是 /article/1 那么也會激活 <router-link to="/article">，所以當(dāng)設(shè)置 exact-active-class 以后，這個 router-link 只有在當(dāng)前路由被全包含匹配時才會被激活 exact-active-class 中的 class，例如：

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

當(dāng)用戶訪問 /article/1 時會被激活為：

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

而當(dāng)使用：

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

當(dāng)用戶訪問 /article/1 時，不會激活這個 link 的 class：

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

總結(jié)

到此這篇關(guān)于Vue中點擊active并第一個默認(rèn)選中功能的實現(xiàn)的文章就介紹到這了,更多相關(guān)vue點擊active內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: