vue+elementUI實現(xiàn)點(diǎn)擊按鈕互斥效果

更新時間：2022年04月12日 15:09:06 作者：麥兜:)

這篇文章主要為大家詳細(xì)介紹了vue+elementUI實現(xiàn)點(diǎn)擊按鈕互斥效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+elementUI實現(xiàn)點(diǎn)擊按鈕互斥的具體代碼，供大家參考，具體內(nèi)容如下

先看看實現(xiàn)的效果吧！

步驟：

一.html代碼

<!-- 等級篩選 -->
? ? <div class="level-screening">
? ? ? <el-button
? ? ? ? size="medium"
? ? ? ? type="primary"
? ? ? ? :class="index==itemType?'highlight':''"
? ? ? ? v-for="(item,index) in levelList"
? ? ? ? :key="index"
? ? ? ? @click.prevent="materTay(index,item.code)"
? ? ? >
? ? ? ? {{ item.codeValue }}</el-button
? ? ? >
</div>

二.css(less)代碼

.level-screening {
? ? ? padding-left: 40px;
? ? ? box-sizing: border-box;
? ? ? height: 120px;
? ? ? text-align: left;
? ? ? line-height: 80px;
? ? ? .el-button {
? ? ? ? border-color: #0085f4;
? ? ? ? background-color: #fff;
? ? ? ? color: #0085f4;
? ? ? }
? ? ? .highlight {
? ? ? ? background-color: #8e66f6 !important;
? ? ? ? color: #fff;
? ? ? }
? ? }

三.js代碼

export default {
?data() {
? ? return {
? ? ? ?levelList: [
? ? ? ? {
? ? ? ? ? code: '',
? ? ? ? ? codeValue: '全部'
? ? ? ? },
? ? ? ? {
? ? ? ? ? code: '',
? ? ? ? ? codeValue: '銅'
? ? ? ? },
? ? ? ? {
? ? ? ? ? code: '',
? ? ? ? ? codeValue: '銀'
? ? ? ? },
? ? ? ? {
? ? ? ? ? code: '',
? ? ? ? ? codeValue: '金'
? ? ? ? },
? ? ? ? {
? ? ? ? ? code: '',
? ? ? ? ? codeValue: '白金'
? ? ? ? },
? ? ? ? {
? ? ? ? ? code: '',
? ? ? ? ? codeValue: '鉑金'
? ? ? ? }
? ? ? ], // 等級篩選數(shù)據(jù)
? ? ? itemType: 0, // 等級篩選選中的標(biāo)識
? ? ? materialCode: '' // 分類的code值
? ? ? ? }
? ? },
? ?methods: {
? ? // 等級篩選互斥效果
? ? materTay(itemType, code) {
? ? ? // 等級篩選選中的標(biāo)識-高亮效果
? ? ? this.itemType = itemType
? ? ? // 分類的code值
? ? ? this.materialCode = code
? ? }
? }
}

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

您可能感興趣的文章:

相關(guān)文章

vue中使用vue-pdf的方法詳解
這篇文章主要介紹了vue中使用vue-pdf的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
vue之?dāng)?shù)據(jù)代理詳解
這篇文章主要為大家介紹了vue之?dāng)?shù)據(jù)代理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
vue為什么v-for的優(yōu)先級比v-if高原理解析
這篇文章主要為大家介紹了vue為什么v-for的優(yōu)先級比v-if高原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
Vue2如何支持composition API示例詳解
這篇文章主要為大家介紹了Vue2如何支持composition API示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實例詳解
這篇文章主要介紹了Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實例,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-11-11
Vite圖片資源打包優(yōu)化的實現(xiàn)
本文主要介紹了Vite圖片資源打包優(yōu)化的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue中實現(xiàn)多頁面應(yīng)用方式
這篇文章主要介紹了vue中實現(xiàn)多頁面應(yīng)用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue2中vue-router引入使用詳解
Vue?Router?是?Vue?的官方路由,它與?Vue.js?核心深度集成,讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉,下面就跟隨小編一起學(xué)習(xí)一下vue-router的具體用法吧
2023-12-12
VUE前端實現(xiàn)token的無感刷新方式
這篇文章主要介紹了VUE前端實現(xiàn)token的無感刷新方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue3跨域解決方案實例詳解
這篇文章主要介紹了Vue3跨域解決方案詳解,需要的朋友可以參考下
2023-01-01