更改 html 属性 vue.js

Question

我的 html 页面中有以下行：

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

我想知道我是否可以用 vue.js 动态更改属性 {{button1}}（每次我重新加载页面时，我想更改按下该按钮时执行的功能） .

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

按钮放在 table 中，table 放在 ID 为 app 的 div 中。

Answer 1

您不能从模板调用具有动态名称的方法，而是创建一个函数来处理 Vue 组件上的动态函数调用，并添加 @onclick 事件来调用该函数

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

更改 html 属性 vue.js

Change a html attribute vue.js

javascript

html

vue.js

htmlbutton