vue3 模版代码

以下是一个简单的 Vue3 模板代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="addItem">新增</button>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      title: 'Vue3 Demo',
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    });

    function addItem() {
      state.items.push({ id: Date.now(), name: `Item ${state.items.length + 1}` });
    }

    return { state, addItem };
  },
};
</script>

这个组件有一个标题和一个包含项目列表的无序列表。它还有一个“新增”按钮，用于添加新项。该组件使用 `reactive` 函数创建一个响应式数据对象 `state`，并在 `setup` 钩子函数中返回该对象和一个 `addItem` 方法。在模板中，我们使用双括号语法 `{{ ... }}` 来绑定数据，使用 `v-for` 指令来循环渲染列表项，并使用 `@click` 绑定 `addItem` 方法到按钮上。