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

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

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

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

1 2 3 4 5 6 7 8 9 10

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

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

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

正确写法：MtR无知

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

1 2 3 4 5 6 7 8 9 10

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

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

1 2 3 4 5 6 7 8 9 10 11

<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无知

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

MtR无知

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

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