vue實(shí)現(xiàn)tab欄點(diǎn)擊高亮效果

更新時(shí)間：2020年08月19日 17:02:47 作者：WayneP_

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)tab欄點(diǎn)擊高亮效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了tab欄實(shí)現(xiàn)點(diǎn)擊高亮，供大家參考，具體內(nèi)容如下

之前面試的時(shí)候被問(wèn)到過(guò)如何使用vue實(shí)現(xiàn)tab欄切換高亮，今天自己寫(xiě)demo順便記錄一下

vue官方文檔里有一個(gè)基礎(chǔ)知識(shí)點(diǎn)叫做對(duì)象語(yǔ)法

<div
 class="static"
 v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
//data如下
data: {
 isActive: true,
 hasError: false
}
//渲染結(jié)果為
<div class="static active"></div>

個(gè)人覺(jué)得類(lèi)似三元表達(dá)式，如果值為true則給該元素添加上指定的class

實(shí)際代碼如下

<template>
 <div>
 <!-- v-for循環(huán)渲染arr -->
 <!-- 把當(dāng)前點(diǎn)擊的name通過(guò)selected傳給data里的active -->
 <!-- 判斷如果active的值與當(dāng)前點(diǎn)擊的name相同 則給當(dāng)前點(diǎn)擊的div加上active樣式 -->
 <div id="box" 
 v-for="(item,index) in arr" 
 :key="index"
 @click = selected(item.name)
 :class="{active:active == item.name}"
 >
 {{item.name}}
 </div>
 </div>
</template>
<script>
export default {
 name: "index",
 data() {
 return {
 arr: [
 { name: "娃哈哈" },
 { name: "椰子汁" },
 { name: "檸檬茶" },
 { name: "可樂(lè)" },
 { name: "雪碧" }
 ],
 active: "娃哈哈"
 };
 },
 methods: {
 selected(name){
 this.active = name
 console.log(name)
 }
 }
};
</script>
<style>
.active {
 background-color: orange;
 color: white;
}
#box {
 width: 100px;
 height: 100px;
 margin: 10px;
 float: left;
 border: 1px solid #000;
}
</style>

我是前端萌新一枚，剛接觸前端沒(méi)多久，vue接觸時(shí)間就更短了，每天進(jìn)步一點(diǎn)點(diǎn)！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3雙向綁定實(shí)現(xiàn)原理解讀
這篇文章主要介紹了vue3雙向綁定實(shí)現(xiàn)原理解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
elementUI table如何給表頭添加氣泡顯示
這篇文章主要介紹了elementUI table如何給表頭添加氣泡顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue.js鼠標(biāo)懸浮更換圖片功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)鼠標(biāo)懸浮更換圖片功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
Vue3 ref構(gòu)建響應(yīng)式變量失效問(wèn)題及解決
這篇文章主要介紹了Vue3 ref構(gòu)建響應(yīng)式變量失效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue3?keep-alive實(shí)現(xiàn)tab頁(yè)面緩存功能
如何在我們切換tab標(biāo)簽的時(shí)候，緩存標(biāo)簽最后操作的內(nèi)容，簡(jiǎn)單來(lái)說(shuō)就是每個(gè)標(biāo)簽頁(yè)中設(shè)置的比如搜索條件及結(jié)果、分頁(yè)、新增、編輯等數(shù)據(jù)在切換回來(lái)的時(shí)候還能保持原樣，這篇文章介紹vue3?keep-alive實(shí)現(xiàn)tab頁(yè)面緩存功能，感興趣的朋友一起看看吧
2023-04-04
vue構(gòu)建動(dòng)態(tài)表單的方法示例
這篇文章主要介紹了vue構(gòu)建動(dòng)態(tài)表單的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
9102年webpack4搭建vue項(xiàng)目的方法步驟
這篇文章主要介紹了9102年webpack4搭建vue項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
vue項(xiàng)目中路徑使用@和~的區(qū)別及說(shuō)明
這篇文章主要介紹了vue項(xiàng)目中路徑使用@和~的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問(wèn)題
這篇文章主要介紹了vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Element-plus側(cè)邊欄踩坑的問(wèn)題解決
本文主要介紹了Element-plus側(cè)邊欄踩坑的問(wèn)題解決,主要解決了el-menu直接嵌套el-menu-item菜單,折疊時(shí)不會(huì)出現(xiàn)文字顯示和小箭頭無(wú)法隱藏的問(wèn)題,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-08-08