vue+elementUI實(shí)現(xiàn)點(diǎn)擊按鈕互斥效果
更新時(shí)間：2022年04月12日 15:09:06 作者：麥兜:)
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)點(diǎn)擊按鈕互斥效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue+elementUI實(shí)現(xiàn)點(diǎn)擊按鈕互斥的具體代碼，供大家參考，具體內(nèi)容如下
先看看實(shí)現(xiàn)的效果吧！
步驟：
一.html代碼
<!-- 等級(jí)篩選 -->
? ? <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: '鉑金'
? ? ? ? }
? ? ? ], // 等級(jí)篩選數(shù)據(jù)
? ? ? itemType: 0, // 等級(jí)篩選選中的標(biāo)識(shí)
? ? ? materialCode: '' // 分類的code值
? ? ? ? }
? ? },
? ?methods: {
? ? // 等級(jí)篩選互斥效果
? ? materTay(itemType, code) {
? ? ? // 等級(jí)篩選選中的標(biāo)識(shí)-高亮效果
? ? ? this.itemType = itemType
? ? ? // 分類的code值
? ? ? this.materialCode = code
? ? }
? }
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了QT和vue交互的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue中webpack的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
教你使用vue-cli快速構(gòu)建的小說(shuō)閱讀器
這篇文章主要介紹了vue-cli構(gòu)建的小說(shuō)閱讀器，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
element中el-table與el-form同用并校驗(yàn)
本文主要介紹了element中el-table與el-form同用并校驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
給vue項(xiàng)目添加ESLint的詳細(xì)步驟
本篇文章主要介紹了給vue項(xiàng)目添加ESLint的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要為大家介紹了c++游戲教程使用easyx實(shí)現(xiàn)大飛機(jī)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue實(shí)現(xiàn)同一個(gè)頁(yè)面可以有多個(gè)router-view的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)同一個(gè)頁(yè)面可以有多個(gè)router-view的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了如何解決vue2.0下IE瀏覽器白屏問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)
Vuex是一個(gè)專門為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
vue.js單頁(yè)面應(yīng)用實(shí)例的簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了vue.js單頁(yè)面應(yīng)用實(shí)例的簡(jiǎn)單實(shí)現(xiàn)，使用單頁(yè)應(yīng)用，沒(méi)有頁(yè)面切換，就沒(méi)有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。2017-04-04