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

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

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

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

個(gè)人覺得類似三元表達(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 v-for='(item,index) in arr' :key='index' @click = selected(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接觸時(shí)間就更短了，每天進(jìn)步一點(diǎn)點(diǎn)！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。