vue3的composition-API（任务列表）

1.上面是未完成的列表，下面是已完成的列表，当点击checkbox，会切换到已完成的列表，并且是一个disable状态，上面未完成的任务可以双击进行编辑，点击input外部可退出编辑状态，并保存以编辑的内容，也可对其删除。
2.需在index.html引入bootCDN:<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

<template>
  <div class="container" @mousedown="mousedown">
    <h1>ToDoList</h1>
    <h3>
      共有<span class="text-primary">{
   {
    lists.length }}</span
      >个任务，已完成<span class="text-success">{
   {
    finished.length }}</span
      >个任务
    </h3>
    <h3>未完成的列表</h3>
    <ul class="list-group">
      <template v-for="(item, index) in lists">
        <li class="list-group-item d-flex justify-content-between" :key="index" v-if="!item.checked">
          <div class="form-group form-check mb-0">
            <input
              type="checkbox"
              class="form-check-input"
              v-model="item.checked"
              @click="() => (item.checked = !item.checked)"
            />
            <label
              class="form-check-label"
              v-if="!item.isEdit"
              @dblclick="showEdit(item, index)"