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代碼
<!-- 等級篩選 -->
? ? <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)識(shí)
? ? ? materialCode: '' // 分類的code值
? ? ? ? }
? ? },
? ?methods: {
? ? // 等級篩選互斥效果
? ? materTay(itemType, code) {
? ? ? // 等級篩選選中的標(biāo)識(shí)-高亮效果
? ? ? this.itemType = itemType
? ? ? // 分類的code值
? ? ? this.materialCode = code
? ? }
? }
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中使用vue-pdf的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
這篇文章主要為大家介紹了vue之?dāng)?shù)據(jù)代理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助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示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實(shí)例詳解
這篇文章主要介紹了Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實(shí)例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue中實(shí)現(xiàn)多頁面應(yīng)用方式
這篇文章主要介紹了vue中實(shí)現(xiàn)多頁面應(yīng)用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue?Router?是?Vue?的官方路由,它與?Vue.js?核心深度集成,讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉,下面就跟隨小編一起學(xué)習(xí)一下vue-router的具體用法吧2023-12-12
VUE前端實(shí)現(xiàn)token的無感刷新方式
這篇文章主要介紹了VUE前端實(shí)現(xiàn)token的無感刷新方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue3跨域解決方案詳解,需要的朋友可以參考下2023-01-01