vue3 methods

作者：花折亦无情发布日期:2026-02-17 浏览:31

<template>
  <div>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

解释说明：

template：定义了HTML结构，包含一个按钮。按钮绑定了一个点击事件 @click="increment"，当按钮被点击时会调用 methods 中定义的 increment 方法。
data：返回一个对象，其中包含组件的状态。这里有一个 count 变量，初始值为0。
methods：定义了组件的方法。increment 方法会在每次点击按钮时将 count 的值加1。

如果你需要更多关于 Vue 3 的 methods 的信息或有其他问题，请告诉我！

上一篇：vue json 编辑器

下一篇：vue3调用子组件方法