vue里function语法

在Vue中使用function语法有以下几种方式：

1. 在Vue组件中定义methods属性，然后在该属性内定义函数：

<template>
  <div>
    <button @click="testFunction">点击测试</button>
  </div>
</template>

<script>
export default {
  name: "TestComponent",
  methods: {
    testFunction: function() {
      console.log("测试函数");
    }
  }
};
</script>

2. 在Vue组件中定义computed属性，然后在该属性内定义函数：

<template>
  <div>
    <p>{{ computedFunction }}</p>
  </div>
</template>

<script>
export default {
  name: "TestComponent",
  data() {
    return {
      name: "Vue"
    };
  },
  computed: {
    computedFunction() {
      return `Hello ${this.name}!`;
    }
  }
};
</script>

3. 在Vue组件中使用箭头函数：

<template>
  <div>
    <button @click="() => testFunction('参数')">点击测试</button>
  </div>
</template>

<script>
export default {
  name: "TestComponent",
  methods: {
    testFunction: (parameter) => {
      console.log(`测试函数，传入参数为${parameter}`);
    }
  }
};
</script>