Vue3.0 小练习（记事本）

Vue3.0 小练习（记事本）

这是参考 一位大佬视频 来编辑完成的 希望给大家带来帮助 全在代码中写有注释

<template>
	<!-- 在这里我们使用的是 bootstrap 样式   需要在index.html 引入  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
	 需要样式可以去 https://getbootstrap.com/docs/4.5/utilities/close-icon/ 这里查找 -->
	<div class="container" @mousedown="mouseDown">
		<h1>记事本</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" :key="index">
				<li class="list-group-item d-flex justify-content-between" v-if="!item.checked">
					<div class="form-group form-check mb-0">
						<!-- 为了区别她每个元素 不同的id  给它id进行一个数据绑定  也可以不绑定id-->
						<input type="checkbox" class="form-check-input" :id