Javascript 为什么我的按钮不使用方法更改内部文本？

我尝试过使用一种方法，在单击编辑按钮后将其内部文本更改为保存，但似乎不起作用。我需要一些帮助

b-button.editbtn.d-flex.flex-row.mb-3(@click="editBlood")
                    p.mb-0.text-white.p-1#editbtns Edit

---

声明一个本地属性并将文本存储在那里，而不是尝试重新定位元素以设置其innerText属性

<template> 
 <button @click="editBlood">{{ text }}</button>
</template> 

<script>
var app = new Vue({
  el: '#app',
  data: {
    button: {
      text: 'My button text'
    },
  },
  methods: {
    editBlood: function() {
      this.button.text = "new text!";
    },
  }
</script>

---

什么按钮？如何调用函数？如果this.edit==！this.edit-一个值怎么可能等于它自身的对立面？你们想表达的实际情况是什么？我还有一个专栏，它将文本转换为输入。现在我还想将我的按钮文本从“编辑”更改为“保存”。col-md-3输入。表单控制类型=文本v-model=测试。结果v-if=编辑范围。值v-if=！编辑

<template> 
 <button @click="editBlood">{{ text }}</button>
</template> 

<script>
var app = new Vue({
  el: '#app',
  data: {
    button: {
      text: 'My button text'
    },
  },
  methods: {
    editBlood: function() {
      this.button.text = "new text!";
    },
  }
</script>