vue实现方法

Vue 方法实现

Vue 中的方法通常定义在 methods 对象中，用于封装可复用的逻辑或事件处理函数。以下是一个基本示例：

<template>
  <button @click="greet">点击问候</button>
</template>

<script>
export default {
  methods: {
    greet() {
      alert('Hello, Vue!')
    }
  }
}
</script>

方法传参

方法可以接收参数，通过模板直接传递：

<template>
  <button @click="sayHi('John')">打招呼</button>
</template>

<script>
export default {
  methods: {
    sayHi(name) {
      alert(`Hi, ${name}!`)
    }
  }
}
</script>

访问组件数据

方法内部可以通过 this 访问组件的数据属性：

<template>
  <button @click="showMessage">显示消息</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue'
    }
  },
  methods: {
    showMessage() {
      alert(this.message)
    }
  }
}
</script>

异步方法

方法可以包含异步操作，如 API 调用：

<template>
  <button @click="fetchData">获取数据</button>
</template>

<script>
export default {
  methods: {
    async fetchData() {
      try {
        const response = await fetch('https://api.example.com/data')
        const data = await response.json()
        console.log(data)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }
  }
}
</script>

方法返回值

方法可以返回计算结果：

<template>
  <p>总和: {{ add(5, 3) }}</p>
</template>

<script>
export default {
  methods: {
    add(a, b) {
      return a + b
    }
  }
}
</script>

方法修饰符

Vue 提供事件修饰符简化方法调用：

<template>
  <form @submit.prevent="onSubmit">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      // 不会触发页面刷新
      console.log('表单已提交')
    }
  }
}
</script>

方法调用方式

除了模板事件绑定，也可以在脚本中调用方法：

<template>
  <button @click="triggerMethod">触发</button>
</template>

<script>
export default {
  methods: {
    triggerMethod() {
      this.anotherMethod()
    },
    anotherMethod() {
      console.log('方法被调用')
    }
  }
}
</script>