vue3定义对象

作者：洮娦ゞ发布日期:2026-04-25 浏览:111

// 定义一个简单的 Vue 3 组件，其中包含一个对象

<template>
  <div>
    <p>姓名: {{ user.name }}</p>
    <p>年龄: {{ user.age }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 使用 reactive 定义一个响应式对象
    const user = reactive({
      name: '张三',
      age: 25
    });

    return {
      user
    };
  }
};
</script>

<style scoped>
/* 这里可以添加样式 */
</style>

解释说明：

reactive 函数：Vue 3 中使用 reactive 函数来创建一个响应式对象。任何对这个对象属性的修改都会自动触发视图更新。
setup 函数：这是 Vue 3 Composition API 的入口函数，在这里你可以定义和返回组件的状态、方法等。
模板绑定：在模板中通过 {{ user.name }} 和 {{ user.age }} 来绑定对象的属性，当对象属性发生变化时，视图会自动更新。
返回对象：在 setup 函数中返回的对象会暴露给模板和其他地方使用。

如果你需要更多关于 Vue 3 的信息或有其他问题，请告诉我！

上一篇：vue validate

下一篇：vue3 使用pinia