el-button通过js脚本修改按钮文字、属性、类型、状态的方法

实现方法参考别人解决问题的一篇文章：el-button点击事件 文字修改报错MtR无知

用element框架写click事件：MtR无知

<el-button :ref="testRef" type="text" @click="testbtn">111</el-button>

data() {
    return {
    testRef:{},
    };
  },
methods: {
   testbtn() {
   this.$refs.testRef.innerHTML = '222'
   };
}

点击报错，找不到指定innerHTMLMtR无知

询问前辈，原因是这个直接写入用的就是原生方法获取dom，可能跟el-button事件机制冲突了，框架基本从不用inner。MtR无知

正确写法：MtR无知

<el-button :ref="testRef" type="text" @click="testbtn">{{testMsg}}</el-button>

 data() {
    return {
    testRef:{},
    testMsg: "111",
    };
  },
methods: {
    let that = this;
    that.testRef = "222";
}

如果要用innerHTML方法，首先直接用<div>不用<el->，且:ref改为refMtR无知

<div ref="testRef" type="text" @click="testbtn">111</div>
data() {
    return {
    testRef:{},
    };
  },
methods: {
   testbtn() {
   this.$refs.testRef.innerHTML = '222'//this.refs.获取制定DOM.输出值：原始值
   };
}

关键的就是上面用的 {{testMsg}} 绑定值的方法，之后只要在脚本中修改变量 testMsg 的值，el-button 的按钮文字就会同步改变了。MtR无知

MtR无知

参考：https://blog.csdn.net/weixin_43479662/article/details/121082300 MtR无知

MtR无知

同样的，按钮的样式，是否可用等属性都可以通过变量去控制，例如：MtR无知

<el-button :type="loadmoretype" :disabled="isdisabled" @click="submitForm('form')">{{loadmoretxt}}</el-button>

MtR无知

本文为转载文章，版权归原作者所有，不代表本站立场和观点。

很赞哦！ () 赏 有话说 ()