显示按钮被点击的次数

Question

我在 HTML 中创建了一个按钮，我想知道如何使用 Vue.js 在控制台中显示它被按下的次数。

这是我到目前为止所做的：

<div class="123">
  <button id = "Abutton" @click="abutton()">
    <img src="randomimage.png"
         style="width: 30px; height: 30px;"
    />
  </button>
</div>

在 Vue.js 中：

abutton: function (e) {
  const ButtonVal = e.target.value;
  console.log("Number of likes:" + ButtonVal)
},

Answer 1

button没有任何value ......但你可以使用这样的数据属性：

<div class="123">
  <button id = "Abutton" @click="abutton()" data-clickcount="0">
    <img src="randomimage.png"
         style="width: 30px; height: 30px;"
    />
  </button>
</div>

在 Vue.js 中：

abutton: function (e) {
  // Get the count
  const ButtonVal = +(e.target.dataset.clickcount);
  // Increment and store it
  e.target.dataset.clickcount = ButtonVal++;
  // log it
  console.log("Number of likes:" + ButtonVal)
},