vue實現(xiàn)tab欄點擊高亮效果
更新時間：2020年08月19日 17:02:47 作者：WayneP_
這篇文章主要為大家詳細介紹了vue實現(xiàn)tab欄點擊高亮效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了tab欄實現(xiàn)點擊高亮，供大家參考，具體內(nèi)容如下
之前面試的時候被問到過如何使用vue實現(xiàn)tab欄切換高亮，今天自己寫demo順便記錄一下
vue官方文檔里有一個基礎(chǔ)知識點叫做對象語法
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
//data如下
data: {
isActive: true,
hasError: false
}
//渲染結(jié)果為
<div class="static active"></div>
個人覺得類似三元表達式，如果值為true則給該元素添加上指定的class
實際代碼如下
<template>
<div>
<!-- v-for循環(huán)渲染arr -->
<!-- 把當前點擊的name通過selected傳給data里的active -->
<!-- 判斷如果active的值與當前點擊的name相同 則給當前點擊的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接觸時間就更短了，每天進步一點點！
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3雙向綁定實現(xiàn)原理解讀,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了elementUI table如何給表頭添加氣泡顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)鼠標懸浮更換圖片功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決
這篇文章主要介紹了Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3?keep-alive實現(xiàn)tab頁面緩存功能
如何在我們切換tab標簽的時候，緩存標簽最后操作的內(nèi)容，簡單來說就是每個標簽頁中設(shè)置的比如搜索條件及結(jié)果、分頁、新增、編輯等數(shù)據(jù)在切換回來的時候還能保持原樣，這篇文章介紹vue3?keep-alive實現(xiàn)tab頁面緩存功能，感興趣的朋友一起看看吧2023-04-04
這篇文章主要介紹了vue構(gòu)建動態(tài)表單的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了9102年webpack4搭建vue項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
這篇文章主要介紹了vue項目中路徑使用@和~的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue2項目如何將webpack遷移為vite并使用svg解決所有bug問題
這篇文章主要介紹了vue2項目如何將webpack遷移為vite并使用svg解決所有bug問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了Element-plus側(cè)邊欄踩坑的問題解決,主要解決了el-menu直接嵌套el-menu-item菜單,折疊時不會出現(xiàn)文字顯示和小箭頭無法隱藏的問題,具有一定的參考價值,感興趣的可以了解一下2023-08-08