更改 html 屬性 vue.js

Question

我的 html 頁面中有以下行：

<button onclick={{button1}}>Vote</button>

我想知道我是否可以使用 vue.js 動態更改屬性{{button1}} （每次我重新加載頁面時，我都想更改按下該按鈕時執行的 function 的內容）。

我能夠更改其他 html 元素，但我不知道如何更改此屬性。

按鈕放置在表格中，表格位於 id 為 app 的 div 上。

Answer 1

您不能從模板中調用具有動態名稱的方法，而是創建一個 function 來處理對 Vue 組件的動態 function 調用，並添加 @onclick 事件來調用該 ZC1C425268E68385D1AB5074C7A94141

<template>
  <div>
    <br />
    <!-- Will call function named "one" -->
    <button @click="callFunctionWithName('one')">Calling function one</button>
    <br />
    <!-- Will call function named "two" -->
    <button @click="callFunctionWithName('two')">Calling function two</button>
    <br />
    <!-- Will call function named "three" -->
    <button @click="callFunctionWithName('three')">
      Calling function three
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    callFunctionWithName(functionName) {
      console.log("Calling function : ", functionName);
      this[functionName]();
    },
    one() {
      alert(1);
    },
    two() {
      alert(2);
    },
    three() {
      alert(3);
    }
  }
};
</script>