如何从函数更改数据值？

Question

我想在每次点击时更改计数变量。如果我在 on:clik 事件中放入“count++”，它就会起作用。但是，当我想使用一个函数时，它什么也没做。我还尝试将组件和“新视图”放在同一文件 js 中，但不起作用并显示空白页，为什么？谢谢

Prova.js

Vue.component('prova', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<div><button v-on:click="Add">You clicked me {{ count }} times.</button></div>',
    methods:{
        Add: function(){
           prova.count++;
        }
    }

});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>prova component</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script type="text/javascript" src="Prova.js"></script>

</head>
<body>
<section id="prova">
    <prova ></prova>

<script>
    new Vue({
        el: "#prova",
    })
</script>
</section>
</body>
</html>

Answer 1

其实我不知道你的第二个component是用来做什么的，但是你可以这样解决你的问题：

模板中

<template>
  <div>
    <button @click="addCount()"></button>
    <div>You have clicked the button {{count}} times.</div>
  </div>
</template>

• @click 与 v-on:click 相同

• 你应该这样写：addCount()

在脚本中：

export default {
  data() {
    return {
      count: 0,
    }
  },

  methods: {
    addCount() {
      this.count += 1;
    }
  }
}

• 在您的数据中定义 count

• 使用方法并在按钮上的每个 click 上将当前值加 1

这应该可以解决您的问题。如果这对您有用，请给我一个简短的反馈！

用于小测试：您也可以从count中减去。只需创建第二个 button 并在您使用 this.count -= 1 的地方创建另一个点击事件。每次单击它都会减去 1。

如何从函数更改数据值？

How con i change data value from a function?

components

vue.js