實現點擊按鈕使當前按鈕高亮，其他按鈕復原的效果
實現思路
•在data中定義即將渲染的數據，及active
data() { return { wpList: [ { name: '食品飲料' }, { name: '鮮花' }, { name: '蛋糕' }, { name: '水果生鮮' }, { name: '服裝鞋帽' }, { name: '其它' } ], active:'' } } ...•定義高亮的標簽類名
.active { background: #fd7522; border: 1px solid #fd7522; color: #fff; }•動態渲染按鈕的數據，并動態的增加active類名（當active為當前name值時添加），添加點擊事件（點擊時讓active=name）
<el-row class="wp-list"> <el-button v-for="item in wpList" :key="item.name" :class="{active : active == item.name}" @click="selected(item.name)">{{item.name}}</el-button></el-row>•在methods中定義點擊事件函數
selected(name){ this.active = name;}總結
以上所述是小編給大家介紹的vue實現點擊當前標簽高亮效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
