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的元素（說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)文章
這篇文章主要介紹了Vue2的diff算法規(guī)則原理詳解，diff?算法，就是通過比對(duì)新舊兩個(gè)虛擬節(jié)點(diǎn)不一樣的地方，針對(duì)那些不一樣的地方進(jìn)行新增或更新或刪除操作。接下來我們?cè)敿?xì)介紹節(jié)點(diǎn)更新的過程2022-06-06
Element-UI表格嵌入popover遇到的問題及解決方案
在表格中我們通常需要在每一行的一些單元格中顯示popover,這篇文章主要給大家介紹了關(guān)于Element-UI表格嵌入popover遇到的問題及解決方案,需要的朋友可以參考下2023-11-11
vue 數(shù)據(jù)(data)賦值問題的解決方案
這篇文章主要介紹了vue 數(shù)據(jù)(data)賦值問題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2021-03-03
這篇文章主要介紹了vue.js封裝switch開關(guān)組件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了手寫一個(gè)vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了Vue2 添加數(shù)據(jù)可視化支持的方法步驟,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
vue3緩存頁面keep-alive及路由統(tǒng)一處理詳解
當(dāng)我們不想每次跳轉(zhuǎn)路由都會(huì)重新加載頁面時(shí)（重新加載頁面很耗時(shí)）,就可以考慮使用keep-alive緩存頁面了,這篇文章主要給大家介紹了關(guān)于vue3緩存頁面keep-alive及路由統(tǒng)一處理的相關(guān)資料,需要的朋友可以參考下2021-10-10
VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例
下面小編就為大家分享一篇VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue3中vite的@路徑別名與path中resolve實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于vue3中vite的@路徑別名與path中resolve的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼
本篇文章主要介紹了使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01