vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變
更新時(shí)間：2023年11月16日 09:46:08 作者：Kevin M
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue按鈕文字動(dòng)態(tài)改變
- 1.事件
- 2.取元素
- 3.函數(shù)
仔細(xì)看 有你想要的！
<template>
<!-- $event是獲取當(dāng)前元素屬性 -->
<!-- ref相當(dāng)于id -->
<el-button ref='btn1' @click="getname($event)">你好，我是黃曉明</el-button>
</template>
<script>
export default {
name: "flowDetail",
data() {
return {
stuname:'我是朱曉明'
};
},
components: {
},
methods: {
getname(val){
//console.log(val.target.innerText )
var name = this.stuname;
this.stuname = this.$refs.btn1.$el.innerText;
//this.$refs.btn1是取上面id為btn1的元素（說(shuō)id是不嚴(yán)謹(jǐn)?shù)模?
this.$refs.btn1.$el.innerText = name
}
},
created() {
},
mounted() {
}
};
</script>
vue點(diǎn)擊按鈕改變按鈕內(nèi)容和圖標(biāo)
isbig:false
效果圖如下：
還可以根據(jù)按鈕控制顯示與隱藏
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼
菜單管理是一個(gè)對(duì)菜單樹(shù)結(jié)構(gòu)的增刪改查操作，這篇文章主要介紹了Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼,需要的朋友可以參考下2022-02-02
在vue中實(shí)現(xiàn)在線預(yù)覽PDF文件我們可以使用vue-pdf來(lái)實(shí)現(xiàn),下面這篇文章主要介紹了Vue中使用vue-pdf嵌入和展示PDF文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
vue項(xiàng)目?jī)?yōu)雅實(shí)現(xiàn)自動(dòng)引入組件的方法詳解
在我們寫(xiě)vue項(xiàng)目的時(shí)候,都會(huì)引入一些組件庫(kù),有時(shí)候有可能還不止一個(gè)組件庫(kù),那么如何優(yōu)雅的實(shí)現(xiàn)自動(dòng)引入組件呢,下面小編就來(lái)和大家詳細(xì)講講吧2023-09-09
electron-vue開(kāi)發(fā)環(huán)境內(nèi)存泄漏問(wèn)題匯總
這篇文章主要介紹了electron-vue開(kāi)發(fā)環(huán)境內(nèi)存泄漏問(wèn)題匯總，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue :src 文件路徑錯(cuò)誤問(wèn)題的解決方法
這篇文章主要介紹了vue :src 文件路徑錯(cuò)誤問(wèn)題的簡(jiǎn)單解決方法，本文分步驟給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要介紹了Vue中watch和methods兩種屬性的作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法
這篇文章主要介紹了Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法,我們需要根據(jù)傳入值的類型,在placeholder屬性賦值"請(qǐng)輸入長(zhǎng)度",“請(qǐng)輸入寬度”,"請(qǐng)輸入厚度"等提示字符,本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
開(kāi)發(fā)一個(gè)封裝iframe的vue組件
這篇文章主要介紹了開(kāi)發(fā)一個(gè)封裝iframe的vue組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了詳解Axios統(tǒng)一錯(cuò)誤處理與后置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了基于vue實(shí)現(xiàn)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11