Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過(guò)程
更新時(shí)間：2023年07月27日 09:25:57 作者：來(lái)啦來(lái)啦~
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過(guò)程,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
一、解決問(wèn)題
二、實(shí)現(xiàn)過(guò)程
1. 按鈕類(lèi)型
elementui中按鈕有默認(rèn)按鈕類(lèi)型和樸素按鈕類(lèi)型。
<el-row> <el-button>默認(rèn)按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">信息按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險(xiǎn)按鈕</el-button> </el-row> <el-row> <el-button plain>樸素按鈕</el-button> <el-button type="primary" plain>主要按鈕</el-button> <el-button type="success" plain>成功按鈕</el-button> <el-button type="info" plain>信息按鈕</el-button> <el-button type="warning" plain>警告按鈕</el-button> <el-button type="danger" plain>危險(xiǎn)按鈕</el-button> </el-row>
2. 按鈕屬性
使用type、plain屬性來(lái)定義 Button 的樣式。
示例：
<el-button type="danger" plain>是樸素按鈕</el-button> <el-button type="danger" :plain="false">非樸素按鈕</el-button>
總結(jié)：所以只需要控制plain屬性的值，就可以將按鈕設(shè)置為選中狀態(tài)。
3. 通過(guò)點(diǎn)擊事件控制按鈕狀態(tài)
實(shí)現(xiàn)效果：
點(diǎn)擊右側(cè)按鈕效果：
以vue為例示范：
<template>
...
<div class="row">
<el-button type="danger" :plain="selectA" @click="clickA">默認(rèn)選中按鈕</el-button>
<el-button type="danger" :plain="selectB" @click="clickB">按鈕</el-button>
</div>
...
</template>
<script>
export default {
...
data: function () {
return {
selectA: false,
selectB: true,
}
}
...
methods: {
// 默認(rèn)選中按鈕事件
clickA() {
this.selectA = false;
this.selectB = true;
},
// 按鈕事件
clickB() {
this.selectA = true;
this.selectB = false;
},
}
...
</script>總結(jié)
到此這篇關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Elementui按鈕默認(rèn)選中狀態(tài)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue3.x最小原型系統(tǒng)講解。既然用Vue3.0構(gòu)建最小原型系統(tǒng)，那么肯定要用尤大的最新構(gòu)建工具Vite來(lái)進(jìn)行項(xiàng)目的初始化，下文舉例說(shuō)明,需要的朋友可以參考一下2022-02-02
ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗(yàn)證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
VueJS頁(yè)面渲染之后如何調(diào)用函數(shù)
這篇文章主要介紹了VueJS頁(yè)面渲染之后如何調(diào)用函數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue?LogicFlow更多配置選項(xiàng)示例詳解
這篇文章主要為大家介紹了vue?LogicFlow更多配置選項(xiàng)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
在?Vue?3?中,封裝自定義指令可以幫助你更好地復(fù)用一些常見(jiàn)的DOM操作邏輯,自定義指令可以用于處理一些特定的用戶(hù)交互行為,本文給大家介紹了Vue3封裝自定義指令的示例,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue3.0封裝輪播圖組件的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue使用websocket實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)推送功能
這篇文章主要為大家詳細(xì)介紹了vue如何使用websocket實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)推送,發(fā)布訂閱重連單點(diǎn)登錄功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
Vue實(shí)現(xiàn)動(dòng)態(tài)樣式的多種方法匯總
本文要給大家介紹Vue實(shí)現(xiàn)動(dòng)態(tài)樣式的多種方法，下面給大家?guī)?lái)幾個(gè)案列，需要的朋友可以借鑒研究一下。2021-06-06
vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載
學(xué)了vue寫(xiě)項(xiàng)目這么久,忽然發(fā)現(xiàn)路由懶加載的寫(xiě)法,節(jié)省了加載所有路由的時(shí)間。本文主要介紹了vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載，感興趣的可以了解一下2021-06-06