vue3.0实现小案例

好的，我来给你介绍一个用 Vue 3.0 实现的小案例。

这个案例是一个简单的待办事项列表，可以添加、删除和标记完成任务。

我们先来看一下代码实现：

<template>
  <div>
    <h2>待办事项列表</h2>
    <input type="text" v-model="newTodo" placeholder="请输入待办事项">
    <button @click="addTodo()">添加</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span :class="{ done: todo.done }">{{ todo.content }}</span>
        <button @click="deleteTodo(index)">删除</button>
        <button @click="toggleDone(index)">{{ todo.done ? '未完成' : '已完成' }}</button>
      </li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      newTodo: '',
      todos: []
    });

    const addTodo = () => {
      if (state.newTodo.trim() !== '') {
        state.todos.push({
          content: state.newTodo,
          done: false
        });
        state.newTodo = '';
      }
    };

    const deleteTodo = (index) => {
      state.todos.splice(index, 1);
    };

    const toggleDone = (index) => {
      state.todos[index].done = !state.todos[index].done;
    };

    return {
      newTodo: state.newTodo,
      todos: state.todos,
      addTodo,
      deleteTodo,
      toggleDone
    };
  }
};
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

这个案例使用了 Vue 3.0 的 Composition API，使用 `reactive` 创建响应式对象，然后在 `setup` 函数中定义了添加、删除和标记完成任务的函数，并通过 `return` 返回这些函数和响应式数据，最后在模板中使用了指令和事件监听器来实现交互效果。

如果你想要更详细的介绍，可以参考 Vue 3.0 官方文档：https://v3.vuejs.org/guide/introduction.html。