vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue按钮文字动态改变

vue实现按钮文字动态改变

作者:Kevin M

这篇文章主要介绍了vue实现按钮文字动态改变方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue按钮文字动态改变

仔细看 有你想要的!

<template>
    <!-- $event是获取当前元素属性 -->
    <!-- ref相当于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是不严谨的)
          this.$refs.btn1.$el.innerText = name
      }
  },
  created() {
   
  },
  mounted() {
      
  }
};
</script>

vue点击按钮改变按钮内容和图标

isbig:false

效果图如下:

还可以根据按钮控制显示与隐藏

 

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文