Vue3 methods 属性

Vue3 选项式 API

在 Vue3 中，methods 属性是一个对象，用于定义组件中可用的方法。这些方法可以在组件的模板中通过事件绑定或其他方式进行调用。

methods 属性通常用于处理用户的交互、执行某些逻辑操作或触发组件的行为。

使用 methods 属性的基本语法

在 Vue3 组件中，methods 属性通常在 setup 函数外部定义。它包含一个对象，对象中的每个键值对都表示一个方法，键是方法名，值是该方法的实现。

实例

export default {
methods: {
methodName() {
// 方法逻辑
},
anotherMethod() {
// 另一个方法的逻辑
}
}
}

示例：点击按钮时触发方法

以下是一个简单的示例，展示了如何在 Vue3 中使用 methods 属性来处理按钮点击事件。

实例

<template>
<div>
<button @click="handleClick">点击我</button>
<p>{{ message }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: '你好，Vue3！'
};
},
methods: {
handleClick() {
this.message = '按钮已被点击！';
}
}
};
</script>

代码解析

模板部分：
- 使用 @click 事件绑定将 handleClick 方法与按钮的点击事件关联。
- 当用户点击按钮时，handleClick 方法将被调用。
脚本部分：
- data 函数返回一个包含 message 属性的对象，该属性用于存储显示的消息。
- methods 对象中定义了 handleClick 方法，该方法修改 message 的值。

methods 属性的作用

处理用户交互：
- methods 属性常用于响应用户的点击、输入等交互操作。
执行逻辑操作：
- 可以在方法中编写复杂的逻辑代码，例如数据计算、条件判断等。
触发组件行为：
- 通过方法调用，可以触发组件的状态更新、数据请求等行为。

methods 与 computed 的区别

methods：
- 每次调用时都会执行方法体中的代码。
- 适合用于事件处理或需要手动触发的操作。
computed：
- 只有当依赖的数据发生变化时，才会重新计算。
- 适合用于需要根据数据动态计算结果的场景。

练习

尝试在 methods 中添加一个新的方法，用于清除 message 的内容。
修改示例代码，使得点击按钮时显示当前时间。