vue 利用组件写待办事项

最新推荐文章于 2023-02-23 14:46:38 发布

刘蒋的博客

最新推荐文章于 2023-02-23 14:46:38 发布

阅读量876

点赞数

分类专栏： vue小案列文章标签： vue

本文链接：https://blog.csdn.net/weixin_46140106/article/details/107109134

版权

本文介绍如何使用 Vue.js 框架来创建一个功能完善的待办事项组件。通过实例化 Vue 实例，定义数据属性和方法，实现添加、删除和状态切换等操作，让你轻松掌握 Vue 组件化开发。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TodoList</title>
</head>
<body>
  <div id="app">
    <todo-header>
      <template v-slot:title>
        <h1>TodoList</h1>
      </template>
      <template #subtitle>
        <h3>事情是做不完的！！！</h3>
      </template>
    </todo-header>

    <!-- <todo-input @custom="addTodoItem"></todo-input> -->
    <todo-input v-model="inputValue" :value="inputValue" @add="addTodoItem"></todo-input>

    <todo-list :todos="todos" @remove="deleteTodoItem"></todo-list>
  </div>

  <script src="https://cdn