vue插值表达式里面调用函数

### 如何在 Vue 中通过插值表达式调用函数

在 Vue.js 中，可以在模板中的双大括号语法内执行简单的 JavaScript 表达式。这意味着可以直接在这些位置调用方法或访问计算属性。

对于希望展示如何利用插值表达式来调用组件的方法的情况，下面是一个具体的例子：

<template>
  <div id="app">
    <!-- 调用 greet 方法并传递参数 -->
    {{ greet('world') }}
    
    <!-- 使用带有事件监听器的按钮触发方法 -->
    <button @click="updateMessage">Change message</button>

    <!-- 显示由 updateMessage 方法更新的消息 -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello!'
    }
  },
  methods: {
    // 定义一个可以被插值表达式调用的方法
    greet(name) {
      return `Hello ${name}`
    },
    updateMessage() {
      this.message = this.greet('Vue')
    }
  }
}
</script>

需要注意的是，在实际开发过程中应当谨慎地在插值表达式里直接调用复杂逻辑的方法[^1]。如果业务逻辑较为复杂，则推荐将这部分处理放在 computed 属性或是 methods 下面，并且只在模板中简单引用返回的结果。