vue實(shí)現(xiàn)tab欄點(diǎn)擊高亮效果
更新時間：2020年08月19日 17:02:47 作者：WayneP_
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)tab欄點(diǎn)擊高亮效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了tab欄實(shí)現(xiàn)點(diǎn)擊高亮，供大家參考，具體內(nèi)容如下
之前面試的時候被問到過如何使用vue實(shí)現(xiàn)tab欄切換高亮，今天自己寫demo順便記錄一下
vue官方文檔里有一個基礎(chǔ)知識點(diǎn)叫做對象語法
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
//data如下
data: {
isActive: true,
hasError: false
}
//渲染結(jié)果為
<div class="static active"></div>
個人覺得類似三元表達(dá)式，如果值為true則給該元素添加上指定的class
實(shí)際代碼如下
<template>
<div>
<!-- v-for循環(huán)渲染arr -->
<!-- 把當(dāng)前點(diǎn)擊的name通過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: "可樂" },
{ 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>
我是前端萌新一枚，剛接觸前端沒多久，vue接觸時間就更短了，每天進(jìn)步一點(diǎn)點(diǎn)！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中監(jiān)聽input框獲取焦點(diǎn)及失去焦點(diǎn)的問題
這篇文章主要介紹了vue中監(jiān)聽input框獲取焦點(diǎn)，失去焦點(diǎn)的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
vue3使用vuedraggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue3使用vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue+Flask實(shí)現(xiàn)簡單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼
本篇文章主要介紹了Vue+Flask實(shí)現(xiàn)簡單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue如何使用文件流進(jìn)行下載(new Blob)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
最近學(xué)習(xí)了Vue3,利用vue3做了個好玩的項(xiàng)目,所以下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3模仿Windows窗口的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)單選和多選功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
本篇文章主要介紹了Vue2.0組件間數(shù)據(jù)傳遞示例，組件間數(shù)據(jù)傳遞主要是父子組件之間傳遞，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
Vue前端導(dǎo)出Excel文件的詳細(xì)實(shí)現(xiàn)方案
在開發(fā)后臺管理系統(tǒng)的時候,很多地方都要用到導(dǎo)出excel表格,比如將table中的數(shù)據(jù)導(dǎo)出到本地,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)出Excel文件的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue引入組件的幾種方法匯總,包括常用的局部引入,這里需要注意在哪個頁面需要就在那個頁面引入、注冊、使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
這篇文章主要介紹了Vuex actions?異步操作方法,需要的朋友可以參考下2023-10-10