溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在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內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
