tiam-bloom/vue3_todolist.html

## vue3_todolist.html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    ></script>
  </head>
  <body>
    <div id="app">
        <!-- 剩余未做大于3使，显示红色 -->
      <h1>今天的学习任务<span :style="todolist.length-complated>3?'color:red;':'' ">{{todolist.length-complated}} </span> </h1>
      <input
        type="text"
        placeholder="按回车添加到任务列表"
        v-model="task"
        @keypress.enter="addTodolist"
      />
      <table border="1" cellspacing="0" class="table">
        <thead>
          <tr>
            <th scope="col">序号</th>
            <th scope="col">任务</th>
            <th scope="col">完成情况</th>
            <th scope="col">状态</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item,index) of todolist"
            :class="item.isComplate?'table-success':'table-warning'"
            v-show="!(item.isComplate && undone)"
          >
            <td>{{index}}</td>
            <td>{{item.task}}</td>
            <td>{{item.isComplate}}</td>
            <td>
              <input
                type="checkbox"
                name="state"
                v-model.trim()="item.isComplate"
              />
            </td>
            <td>
              <a href="#" @click.prevent="todolist.splice(index,1)">删除</a>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">
              已完成任务{{complated}}/总任务数{{todolist.length}}
            </td>
            <td><input type="checkbox" v-model="undone">显示所有未完成</td>
          </tr>
        </tfoot>
      </table>
    </div>
    <script>
      const { createApp } = Vue;
      createApp({
        data() {
          return {
            todolist: [
              {
                id: 1,
                task: "搞学习",
                isComplate: true,
              },
              {
                id: 2,
                task: "睡觉觉",
                isComplate: false,
              },
              {
                id: 3,
                task: "发呆",
                isComplate: false,
              },
            ],
            task: "",
            undone:false
          };
        },
        methods: {
          addTodolist() {
            // unshift 添加到首位
            // push 推送到末尾
            this.todolist.unshift({
              id: 1,
              task: this.task,
              isComplate: false,
            });
            this.task = "";
          },
        },
        computed: {
          complated() {
            return this.todolist.filter(item => item.isComplate).length;
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
	crossorigin="anonymous"
	/>
	<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
	></script>
	</head>
	<body>
	<div id="app">
	<!-- 剩余未做大于3使，显示红色 -->
	<h1>今天的学习任务<span :style="todolist.length-complated>3?'color:red;':'' ">{{todolist.length-complated}} </span> </h1>
	<input
	type="text"
	placeholder="按回车添加到任务列表"
	v-model="task"
	@keypress.enter="addTodolist"
	/>
	<table border="1" cellspacing="0" class="table">
	<thead>
	<tr>
	<th scope="col">序号</th>
	<th scope="col">任务</th>
	<th scope="col">完成情况</th>
	<th scope="col">状态</th>
	<th scope="col">操作</th>
	</tr>
	</thead>
	<tbody>
	<tr
	v-for="(item,index) of todolist"
	:class="item.isComplate?'table-success':'table-warning'"
	v-show="!(item.isComplate && undone)"
	>
	<td>{{index}}</td>
	<td>{{item.task}}</td>
	<td>{{item.isComplate}}</td>
	<td>
	<input
	type="checkbox"
	name="state"
	v-model.trim()="item.isComplate"
	/>
	</td>
	<td>
	<a href="#" @click.prevent="todolist.splice(index,1)">删除</a>
	</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
	<td colspan="4">
	已完成任务{{complated}}/总任务数{{todolist.length}}
	</td>
	<td><input type="checkbox" v-model="undone">显示所有未完成</td>
	</tr>
	</tfoot>
	</table>
	</div>
	<script>
	const { createApp } = Vue;
	createApp({
	data() {
	return {
	todolist: [
	{
	id: 1,
	task: "搞学习",
	isComplate: true,
	},
	{
	id: 2,
	task: "睡觉觉",
	isComplate: false,
	},
	{
	id: 3,
	task: "发呆",
	isComplate: false,
	},
	],
	task: "",
	undone:false
	};
	},
	methods: {
	addTodolist() {
	// unshift 添加到首位
	// push 推送到末尾
	this.todolist.unshift({
	id: 1,
	task: this.task,
	isComplate: false,
	});
	this.task = "";
	},
	},
	computed: {
	complated() {
	return this.todolist.filter(item => item.isComplate).length;
	},
	},
	}).mount("#app");
	</script>
	</body>
	</html>