vue實現tab欄點選高亮效果
阿新 • • 發佈:2020-08-20
本文例項為大家分享了tab欄實現點選高亮,供大家參考,具體內容如下
之前面試的時候被問到過如何使用vue實現tab欄切換高亮,
今天自己寫demo順便記錄一下
vue官方文件裡有一個基礎知識點叫做物件語法
<div class="static" v-bind:class="{ active: isActive,'text-danger': hasError }" ></div> //data如下 data: { isActive: true,hasError: false } //渲染結果為 <div class="static active"></div>
個人覺得類似三元表示式,如果值為true則給該元素新增上指定的class
實際程式碼如下
<template> <div> <!-- v-for迴圈渲染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接觸時間就更短了,每天進步一點點!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。