Vue中怎么写一个方法

Vue 中编写方法的方式是在 Vue 实例中定义一个 methods 对象，将各个方法作为其属性。例如：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    sayHello: function () {
      alert(this.message)
    }
  }
})

在上述例子中，定义了一个方法 sayHello，该方法从实例的 data 中取出 message 属性并弹出一个对话框显示出来。在模板中可以通过 v-on 指令将方法绑定到一个事件上，例如：

<div id="app">
  <button v-on:click="sayHello">Say Hello</button>
</div>

当用户点击按钮时就会触发 sayHello 方法并弹出对话框。

相关问题

用vue3写一个递归方法

以下是一个使用Vue3编写的递归方法示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
        <ul v-if="item.children && item.children.length > 0">
          <recursive :items="item.children" />
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Recursive',
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
});
</script>

在上述代码中，我们定义了一个递归组件`Recursive`，该组件接受一个`items`属性作为数据源。在组件的模板中，我们使用`v-for`指令遍历`items`数组，并将其渲染为一个无序列表。如果当前项有子项（即`item.children`存在且不为空），则再次渲染`Recursive`组件，并将子项数组作为`items`属性传递给它。

这样，我们就可以使用递归方法来无限嵌套渲染列表，直到没有子项为止。

写一个vue节流函数方法

好的，以下是一个简单的Vue节流函数：

<template>
  <div>
    <button @click="throttleClick">Click me!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      throttled: false,
    };
  },
  methods: {
    throttleClick: function() {
      if (!this.throttled) {
        this.throttled = true;
        setTimeout(() => {
          this.throttled = false;
        }, 1000);
        // 点击后要执行的函数
      }
    },
  },
};
</script>