【vue】任务列表案例（实训1.4）

已于 2022-01-26 20:29:04 修改
阅读量1k 收藏 5
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-01-04 11:30:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45746744/article/details/122295771
版权

1. 初始化项目

1.在终端运行以下的命令，初始化 vite 项目：

npm init vite-app mytodolist2

2.切换路径

cd mytodolist2

3.使用 vscode 打开项目，并安装依赖项

npm install

4.启动项目

npm run dev

测试一下：结果如下
在这里插入图片描述

2.梳理项目结构

  1. 重置 index.css 中的全局样式如下：
/*所有元素*/
:root {
font-size: 12px;
}
body {
padding: 8px;
}
  1. 重置 App.vue 组件的代码结构如下：
<template>
	<div>
	<h1>App 根组件</h1>
	</div>
</template>

<script>
	
export default {
		name: 'MyApp',
		data() {
			return {
				// 任务列表的数据
				todolist: [
					{ id: 1, task: '周一早晨9点开会', done: false },
					{ id: 2, task: '周一晚上8点聚餐', done: false },
					{ id: 3, task: '准备周三上午的演讲稿', done: true },
				],
			}
		},
}
</script>

<style lang="less" scoped></style>

当前效果：
在这里插入图片描述

3. 封装 todo-list 组件

3.1 创建并注册 TodoList 组件

  1. 在 src/components/todo-list/ 目录下新建 TodoList.vue 组件：
<template>
	<div>TodoList 组件</div>
</template>

<script>
export default {
	name: 'TodoList',
}
</script>

<style lang="less" scoped></style>
  1. 在 App.vue 组件中导入并注册 TodoList.vue 组件：
// 导入 TodoList 组件
import TodoList from './components/todo-list/TodoList.vue'

export default {
	name: 'MyApp',
	// 注册私有组件
	components: {
		TodoList,
	}
}
  1. 在 App.vue 的 template 模板结构中使用注册的 TodoList 组件：
<template>
	<div>
		<h1>App根组件</h1>
		<!-- 使用 todo-list 组件 -->
  	    <todo-list></todo-list>
	</div>
</template>

3.2 基于 bootstrap 渲染列表组件

  1. 将 资料 目录下的 css 文件夹拷贝到 src/assets/ 静态资源目录中。
  2. 在 main.js 入口文件中，导入 src/assets/css/bootstrap.css 样式表：
import { createApp } from 'vue'
import App from './App.vue'

// 导入 bootstrap.css 样式表
import './assets/css/bootstrap.css'
import './index.css'

createApp(App).mount('#app')
  1. 根据 bootstrap 提供的列表组（ https://v4.bootcss.com/docs/components/list-group/#with
    -badges ）和复选框（https://v4.bootcss.com/docs/components/forms/#checkboxes-and-radio
    s-1 ）渲染列表组件的基本效果：
<template>
	<ul class="list-group">
		<li class="list-group-item d-flex justify-content-between align-items-center">
			<!-- 复选框 -->
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" id="customCheck1" />
				<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
			</div>
			<!-- badge 效果 -->
			<span class="badge badge-success badge-pill">完成</span>
			<span class="badge badge-warning badge-pill">未完成</span>
		</li>
	</ul>
</template>

ctrl+shift+f 可自动排版
当前效果如下：
在这里插入图片描述

3.3 为 TodoList 声明 props 属性

  1. 为了接受外界传递过来的列表数据，需要在 TodoList 组件中声明如下的 props 属性：
<script>
export default {
	name: 'TodoList',
	props: {
		// 列表数据
		list: {
			type: Array,
			required: true,
			default: [],
		},
	}
}
</script>
  1. 在 App 组件中通过 list 属性，将数据传递到 TodoList 组件之中：
<todo-list :list="todolist"></todo-list>

当前效果：
在这里插入图片描述

3.4 渲染列表的 DOM 结构

  1. 通过 v-for 指令，循环渲染列表的 DOM 结构：
<template>
	<ul class="list-group">
		<li class="list-group-item d-flex justify-content-between align-items-center" 
			v-for="item in list" :key="item.id">
			<!-- 复选框 -->
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" id="item.id" />
				<label class="custom-control-label" for="item.id">{{item.task}}</label>
			</div>
			<!-- badge 效果 -->
			<span class="badge badge-success badge-pill" v-if="item.done ">完成</span>
			<span class="badge badge-warning badge-pill" v-else>未完成</span>
		</li>
	</ul>
</template>

当前效果如下：
在这里插入图片描述
2. 通过 v-if 和 v-else 指令，按需渲染 badge 效果：

			<!-- badge 效果 -->
			<span class="badge badge-success badge-pill" v-if="item.done ">完成</span>
			<span class="badge badge-warning badge-pill" v-else>未完成</span>
  1. 通过 v-model 指令，双向绑定任务的完成状态：
<!-- 复选框 -->
<div class="custom-control custom-checkbox">
	<input type="checkbox" class="custom-control-input" id="item.id" 
					v-model="item.done"/>
	<!-- 注意：App 父组件通过 props 传递过来的 list 是“引用类型”的数据， -->
	<!-- 这里 v-model 双向绑定的结果是：用户的操作修改的是 App 组件中数据的状态 -->
  1. 通过 v-bind 属性绑定，动态切换元素的 class 类名：
<label class="custom-control-label" 
	:class="item.done ? 'delete' :''" :for="item.id">{{item.task}}</label>

在 TodoList 组件中声明如下的样式，美化当前组件的 UI 结构：

<style lang="less" scoped>
	// 为列表设置固定宽度
	.list-group {
		width: 400px;
	}
	// 删除效果
	.delete {
		text-decoration: line-through;
	}
</style>

当前效果：
在这里插入图片描述

4. 封装 todo-input 组件

4.1 创建并注册 TodoInput 组件

  1. 在 src/components/todo-input/ 目录下新建 TodoInput.vue 组件：
<template>
	<div>TodoInput 组件</div>
</template>

<script>
export default {
	name: 'TodoInput',
}
</script>

<style lang="css" scoped></style>
  1. 在 App.vue 组件中导入并注册 TodoInput.vue 组件：
// 导入 TodoList 组件
import TodoList from './components/todo-list/TodoList.vue'
// 导入 TodoInput 组件
import TodoInput from './components/todo-input/TodoInput.vue'

components:{   //注册组件
		TodoList,TodoInput,
	}
  1. 在 App.vue 的 template 模板结构中使用注册的 TodoInput 组件：
		<!-- 使用 TodoInput 组件 -->
		<todo-input></todo-input>

当前效果：
在这里插入图片描述

4.2 基于 bootstrap 渲染组件结构

  1. 根据 bootstrap 提供的 inline-forms（https://v4.bootcss.com/docs/components/forms/#in
    line-forms ）渲染 TodoInput 组件的基本结构。
  2. 在 TodoInput 组件中渲染如下的 DOM 结构：
<template>
	<!-- form 表单 -->
	<form class="form-inline">
		<div class="input-group mb-2 mr-sm-2">
			<!-- 输入框的前缀 -->
			<div class="input-group-prepend">
				<div class="input-group-text">任务</div>
			</div>
			<!-- 文本输入框 -->
			<input type="text" class="form-control" placeholder="请填写任务信息" style="width: 356px;" />
		</div>
		<!-- 添加按钮 -->
		<button type="submit" class="btn btn-primary mb-2">添加新任务</button>
	</form>
</template>

<script>
export default {
	name: 'TodoInput',
}
</script>

<style lang="css" scoped></style>

4.3 通过自定义事件向外传递数据

  1. 在 TodoInput 组件的 data 中声明如下的数据：
data(){
		return{
			//新任务
			taskname:'',
		}
	}
  1. 为 input 输入框进行 v-model 的双向数据绑定：
<input type="text" class="form-control" placeholder="请填写任务信息" 
	style="width: 356px;" v-model.trim="taskname" />
  1. 监听 form 表单的 submit 事件，阻止默认提交行为并指定事件处理函数：
<form class="form-inline" @submit.prevent="onFormSubmit"></form>
  1. 在 methods 中声明 onFormSubmit 事件处理函数如下：
methods: {
		// 表单提交的事件处理函数
		onFormSubmit() {
			// 1. 判断任务名称是否为空
			if (!this.taskname) return alert('任务名称不能为空！')
			// 2. 触发自定义的 add 事件，并向外界传递数据
			// 3. 清空文本框
		},
	}
  1. 声明自定义事件如下：
//声明自定义事件
	emits:['add'],
  1. 进一步完善 onFormSubmit 事件处理函数如下：
methods: {
		// 表单提交的事件处理函数
		onFormSubmit() {
			// 1. 判断任务名称是否为空
			if (!this.taskname) return alert('任务名称不能为空！')
			// 2. 触发自定义的 add 事件，并向外界传递数据
			this.$emit('add', this.taskname)
			// 3. 清空文本框
			this.taskname = ''
		},
	}

4.4 实现添加任务的功能

  1. 在 App.vue 组件中监听 TodoInput 组件自定义的 add 事件：
		<!-- 使用 TodoInput 组件 -->
		<!-- 监听 TodoInput 的 add 自定义事件 -->
		<todo-input @add="onAddNewTask"></todo-input>
  1. 在 App.vue 组件的 data 中声明 nextId 来模拟 id 自增 +1 的操作。
// 下一个可用的 Id 值
nextId: 4,
  1. 在 App.vue 组件的 methods 中声明 onAddNewTask 事件处理函数如下：
methods: {
	// TodoInput 组件 add 事件的处理函数
	onAddNewTask(taskname) {
	// 1. 向任务列表中新增任务信息
		this.todolist.push({
			id: this.nextId,
			task: taskname,
			done: false, // 完成状态默认为 false
		})
		// 2. 让 nextId 自增+1
		this.nextId++
	},
}

当前效果：
在这里插入图片描述

5. 封装 todo-button 组件

5.1 创建并注册 TodoButton 组件

  1. 在 src/components/todo-button/ 目录下新建 TodoButton.vue 组件：
<template>
	<div>TodoButton 组件</div>
</template>
<script>
export default {
	name: 'TodoButton',
}
</script>
<style lang="css" scoped></style>
  1. 在 App.vue 组件中导入并注册 TodoButton.vue 组件：
// 导入 TodoButton 组件
import TodoButton from './components/todo-button/TodoButton.vue'

components:{   //注册组件
			TodoList,
			TodoInput,
			TodoButton,
		}

5.2 基于 bootstrap 渲染组件结构

  1. 根据 bootstrap 提供的 Button group（https://v4.bootcss.com/docs/components/button-g
    roup/ ）渲染 Todobutton 组件的基本结构。
  2. 在 TodoButton 组件中渲染如下的 DOM 结构：
<template>
	<div class="button-container mt-3">
		<div class="btn-group">
			<button type="button" class="btn btn-primary">全部</button>
			<button type="button" class="btn btn-secondary">已完成</button>
			<button type="button" class="btn btn-secondary">未完成</button>
		</div>
	</div>
</template>
  1. 并通过 button-container 类名美化组件的样式：
<style lang="css" scoped>
	.button-container {
		 /*添加固定宽度*/
		width: 400px;
		 /*文本居中效果*/
		text-align: center;
}
</style>

5.3 通过 props 指定默认激活的按钮

  1. 在 TodoButton 组件中声明如下的 props，用来指定默认激活的按钮的索引：
<script>
export default {
	name: 'TodoButton',
	props: {
		// 激活项的索引值
		active: {
			type: Number,
			required: true,
			// 默认激活索引值为 0 的按钮（全部：0，已完成：1，未完成：2）
			default: 0,
		},
	},
}
</script>

当前效果：
在这里插入图片描述
2. 通过 动态绑定 class 类名 的方式控制按钮的激活状态：

<template>
	<div class="button-container mt-3">
		<div class="btn-group">
			<button type="button" class="btn" 
				:class="active === 0 ?'btn-primary' : 'btn-secondary'">全部</button>
			<button type="button" class="btn" 
				:class="active === 1 ?'btn-primary' : 'btn-secondary'">已完成</button>
			<button type="button" class="btn" 
				:class="active === 2 ?'btn-primary' : 'btn-secondary'">未完成</button>
		</div>
	</div>
</template>
  1. 在 App 组件中声明默认激活项的索引，并通过属性绑定的方式传递给 TodoButton 组件：
data() {
	return {
		// 激活的按钮的索引
		activeBtnIndex: 0
	}
}
<!-- 使用 TodoButton 组件 -->
<todo-button :active="activeBtnIndex"></todo-button>

目前效果如下：
在这里插入图片描述

5.4 通过 v-model 更新激活项的索引

  1. 为 TodoButton 组件中的三个按钮分别绑定 click 事件处理函数如下：
<button type="button" class="btn"  @click="onBtnClick(0)"
	:class="active === 0 ?'btn-primary' : 'btn-secondary'">全部</button>
<button type="button" class="btn" @click="onBtnClick(1)"
	:class="active === 1 ?'btn-primary' : 'btn-secondary'">已完成</button>
<button type="button" class="btn" @click="onBtnClick(2)"
	:class="active === 2 ?'btn-primary' : 'btn-secondary'">未完成</button>
  1. 在 TodoButton 组件的 methods 节点中声明 onBtnClick 事件处理函数如下：
//1.声明自定义事件changeactive
		emits:['changeactive'],
		methods:{
			onBtnClick(n){
				//触发自定义事件changeactive
				this.$emit('changeactive',n)
			}
		}

3.在App.vue中修改如下

 	  <todo-button :active="activeBtnIndex"
 	  	@changeactive="changetasklist" ></todo-button>

changetasklist(n){
				alert(n)
			}

当前效果：
点击全部，弹出对话框显示0；点击已完成，弹出对话框显示1；点击未完成，弹出对话框显示2
在这里插入图片描述
在App.vue中修改如下

			changetasklist(n){
				//n表示单击的是哪一个按钮
				this.activeBtnIndex = n
			}

效果：点击哪一个，哪一个变为蓝色
在这里插入图片描述

5.5 通过计算属性动态切换列表的数据

  1. 在 App 根组件中声明如下的计算属性：
  computed:{    // 计算属性
  	tasklist(){
  		// activeBtnIndex发生变化，就会自动执行tasklist计算属性
  		switch(this.activeBtnIndex){
  			case 0:
  				return this.todolist
  			case 1:
  				return this.todolist.filter( (x) => {return x.done} )
  			case 2:
  				return this.todolist.filter( (x) => {return !x.done} )
  		}
  	}
  }
  1. 在 App 根组件的 DOM 结构中，将 TodoList 组件的 :list="todolist" 修改为：
  		<todo-list :list="tasklist"></todo-list>  <!-- 3.使用todo-list组件 -->

案例完整代码

TodoButton.vue

<template>
	<div class="button-container mt-3">
		<div class="btn-group">
			<button type="button" class="btn"  @click="onBtnClick(0)"
				:class="active === 0 ?'btn-primary' : 'btn-secondary'">全部</button>
			<button type="button" class="btn" @click="onBtnClick(1)"
				:class="active === 1 ?'btn-primary' : 'btn-secondary'">已完成</button>
			<button type="button" class="btn" @click="onBtnClick(2)"
				:class="active === 2 ?'btn-primary' : 'btn-secondary'">未完成</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'TodoButton',
		props:{
			// 当前激活的按钮
			active:{
				type:Number,
				required:true,
				default:1,
			}
		},
		//1.声明自定义事件changeactive
		emits:['changeactive'],
		methods:{
			onBtnClick(n){
				//触发自定义事件changeactive
				this.$emit('changeactive',n)
			}
		}
	}
</script>

<style lang="css" scoped="scoped">
	.button-container{
		width:400px;
		text-align: center;
	}
</style>

TodoInput.vue

<template>
	<!-- form 表单 -->
	<form class="form-inline" @submit.prevent="onFormSubmit">
		<div class="input-group mb-2 mr-sm-2">
			<!-- 输入框的前缀 -->
			<div class="input-group-prepend">
				<div class="input-group-text">任务</div>
			</div>
			<!-- 文本输入框 -->
			<input type="text" class="form-control" placeholder="请填写任务信息" 
				style="width: 356px;" v-model.trim="taskname" />
		</div>
		<!-- 添加按钮 -->
		<button type="submit" class="btn btn-primary mb-2">添加新任务</button>
	</form>
</template>

<script>
export default {
	name: 'TodoInput',
	//声明自定义事件
	emits:['add'],
	data(){
		return{
			//新任务
			taskname:'',
		}
	},
	methods: {
		// 表单提交的事件处理函数
		onFormSubmit() {
			// 1. 判断任务名称是否为空
			if (!this.taskname) return alert('任务名称不能为空！')
			// 2. 触发自定义的 add 事件，并向外界传递数据
			this.$emit('add', this.taskname)
			// 3. 清空文本框
			this.taskname = ''
		},
	}
}
</script>

<style lang="css" scoped></style>

TodoList.vue

<template>
	<ul class="list-group">
		<li class="list-group-item d-flex justify-content-between align-items-center"
			v-for="item in list" :key="item.id">
			
				
			<!-- 复选框 -->
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" 
					:id="item.id" v-model="item.done" />
				<label class="custom-control-label":class="item.done ? 'delete' :
''" :for="item.id">{{item.task}}</label>
			</div>
			
			<!-- badge 效果 -->
			<span class="badge badge-success badge-pill" v-if="item.done">完成</span>
			<span class="badge badge-warning badge-pill" v-else>未完成</span>
		
		</li>
	</ul>

</template>

<script>
	export default {
		name: 'TodoList',
		props:{
			// 任务列表数据
			list:{
				type:Array,   // 类型是数组
				required:true,
				default:[],
			}
		},
	}
</script>

<style lang="css" scoped="scoped">
.list-group {
 width: 400px; }
 .delete {
 text-decoration: line-through; }
 
</style>

App.vue

<template>
  	<div>
  		<!-- 3.监听add事件，执行addNewTask函数 -->
  		<todo-input @add='addNewTask'></todo-input>
  		
  		<todo-list :list="tasklist"></todo-list>  <!-- 3.使用todo-list组件 -->
  		
  		<!-- 5.监听changeactive事件，触发函数changetasklist -->
  		<todo-button :active="activeBtnIndex"
  			@changeactive="changetasklist"
  			></todo-button>
  	</div>
</template>
<script>
// 1.导入组件
import TodoList from './components/todo-list/TodoList.vue'
import TodoInput from './components/todo-input/TodoInput.vue'
import TodoButton from './components/todo-button/TodoButton.vue'

export default {
  name: 'App',
  methods:{
  		// 4.事件函数，参数taskname是this.taskname
  		addNewTask(taskname){
  			this.todolist.push({
  				id:this.nextId,
  				task:taskname,
  				done:false,   // 默认值是false
  			});
  			this.nextId ++
  		},
  		// 6.改变任务列表的函数
  		changetasklist(n){
  			// n表示单击的是哪一个按钮
  			this.activeBtnIndex = n
  		}
  },
  data(){    
  	return{
  		todolist:[    // 任务列表
  			{id:1,task:'9点晨会',done:false},
  			{id:2,task:'10点聚餐',done:true},
  			{id:3,task:'11点准备演讲稿',done:false},
  		],
  		// 新任务id
  		nextId:4,
  		// 激活的按钮的索引
  		activeBtnIndex:0,
  	}
  },
  components: {   // 2. 注册组件
    TodoList,TodoInput,TodoButton,
  },
  computed:{    // 计算属性
  	tasklist(){
  		// activeBtnIndex发生变化，就会自动执行tasklist计算属性
  		switch(this.activeBtnIndex){
  			case 0:
  				return this.todolist
  			case 1:
  				return this.todolist.filter( (x) => {return x.done} )
  			case 2:
  				return this.todolist.filter( (x) => {return !x.done} )
  		}
  	}
  }
}
</script>
<style lang="css" scoped="scoped"></style>

效果如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小张哎！
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue----任务列表案例
m0_67394002的博客
05-15 584
案例完整文件 Vue----任务列表案例 文章目录 1. 案例效果 2. 用到的知识点 3. 整体实现步骤 4. 初始化项目 5. 梳理项目结构 6. 封装 todo-list 组件 6.1 创建并注册 TodoList 组件 6.2 基于 bootstrap 渲染列表组件 6.3 为 TodoList 声明 props 属性 6.4 渲染列表的 DOM 结构 7. 封装 todo-input 组件 7.1 创建并注册 TodoInput 组件 7.2 基于 bootstrap 渲染组.
vue3的composition-API（任务列表）
qq_42529941的博客
12-10 617
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"> &lt
Vue3 —— 任务列表案例
imByte的博客
12-17 2278
刚接触 vue3，做了个任务列表的小案例，在这里简单梳理一下流程以便加深理解
任务列表vue
xiaoshinidiele的博客
05-12 167
完成添加
vue实现任务列表
lch01122的博客
10-10 481
【代码】vue实现任务列表。
Vue详细说明
小白的记录
03-14 2620
一、Vue简介 1.1 简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。 1.2 MVVM 模式的实现者——双向数据绑定模式 Model：模型层，在这里表示 JavaScript 对象 Vi...
Vue第三天学习总结—— Vue全家桶之前后端交互(前后的交互模式、Promise用法、接口调用-fetch用法、接口调用-axios用法、接口调用-async/await用法 )
weixin_52819925的博客
08-27 593
(一) 前后的交互模式 之前处理的案例都是静态数据，而真正的项目都是需要后台提供真正的数据的 那么前台就需要通过后台提供的数据接口获取数据 1. 接口调用方式 原生ajax：比较麻烦，一般不用 基于jQuery的ajax：这个会简单点，但jquery侧重DOM操作，而Vue很少涉及DOM操作 fetch：ajax升级版，标准化组织制定的一套新规范 axios：第三方的库，比fetch更加强大 客户端与服务器通信方式 左侧为客户端，右侧为服务器 客户端通过互联网向服务器发起请求（寻求页面，数据）
jQuery入门jQuery入门
04-26
### jQuery入门知识点详解 #### 一、jQuery简介与特点 **1.1 jQuery定义与背景**...随着Web技术的不断发展，虽然出现了React、Vue等现代前端框架，但jQuery依然保持着其独特的优势，在很多应用场景下发挥着重要作用。
【2024计算机专业毕设免费必过选题】计算机科学/软件工程/大数据等专业最新毕设题目总结、24级毕业生必看选题免费详细讲解、题目不同、难度不同、选好题目很关键。
最新发布
2301_79766712的博客
09-15 3250
5、用户管理：管理员可以管理用户账号，包括添加、编辑、删除和禁用用户账号，确保用户信息的安全和正常运作。管理员模块负责人员管理、商品管理、采购管理、库存管理、订单管理和财务管理，以管理超市的用户、商品、采购、库存、订单和财务信息。功能：分析维度包括空气质量和相关疾病的患病人数、当地地区人数参与人数、男女性别分布、年龄分布、不同区域参与人数及他们的情况，病症词云、身体BMI指数分布、常见症状分布、病史数据等，还包括了对不同地区健康评分情况的地图展示以及近期灵武市居住环境变化等内容最终通过可视化大屏进行展现。
在html中实现word中打批注的功能
biraotian的博客
08-15 2314
随着企业数字化的发展，各行各业都需要不断积攒行业数据，数据的来源有很多，但是一般这些数据都需要通过人机耦合的方式进行数据准确性的确认。为了实现模型跑出来的结果可以准确的显示在页面中，正确的结果又可以反哺给模型，所以在前端做了很多尝试。我们实现的有3种:1是把内容转成图片，利用ocr识别，前端svg绘制坐标。2通过把图片/文本加上编号，缺陷是结构要足够简单，复杂排版不满足。3是把文档解析成html，对html进行打标签。这里只讲第三种，也的最近刚写的demo，有兴趣的可以拷贝到自己的项目中试试运行环境： no
Vue3.0实现一个任务清单ToDoList & vue3小练习
m0_52952413的博客
01-10 1296
## 功能包含 任务增加 任务查找 点击任务切换任务状态 下方按钮实现任务展示切换 总而言之实现了任务的增改查 template代码： <template> <div class="container"> <h2>任务计划表</h2> <!-- 添加框 --> <div class="add"> 添加任务：<input v-model="taskModel"
Vue3待办列表-日记与便签-LOL英雄资料-课程大作业
qq_34060370的博客
08-05 835
Web-Vue课 程 报告项目名称待办列表-日记与便签-LOL英雄资料班 级学 号姓 名刘建杰任课教师开课学期：2021至2022学年第2学期完成时间：2022年6月20日目录源码说明：等CSDN恢复上传资源再开放并在代码中适当修改URL为本地链接因提交包括文件夹，所以无需额外安装第三方包，只需解压到目录，然后cmd窗口进入项目目录，运行命令即可，如下图。.........
VUE3 实现ToDoList经典任务清单增强终结版
start1018的博客
02-26 1048
废话不都说,详情看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
[Vue3实操] 开发Todo List
weixin_30230009的博客
04-06 2714
前言使用Vue3最新的Composition API，开发一个Todo List应用。Todo List应用比较简单，不会使用其他复杂的Vue3组件，但这也使得当前应用与真实的应用脱钩，所以本文重点是体会Vue3的最新语法，下篇文章会阅读element-plus-admin开源项目的源码，从而掌握Vue3目前最近技术栈的使用方式。所谓Todo List应用主要用于记录你需...
12节，Vue实现todoList（任务计划列表）代码，跟着我一步一步写代码，完成进阶，奥里给！
cyhlili100的博客
10-29 910
2020【前端VUE框架】第12节，Vue实现todoList（任务计划列表）代码. 12，Vue实现todoList（任务计划列表） tofacebook.com的需求大致功能： 1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加） 2、动态计算有几个未完成的任务 3、点击复选框，实现选中或不选中效果（即完成或未完成） 4、鼠标移入列表，会出现一...
用vue制作一个任务清单（todoList）
qq_55299191的博客
07-04 1133
用vue制作一个任务清单（todoList）
Vue实现todoList（任务计划列表）
热门推荐
冰雪为融的博客
07-14 3万+
大致功能：1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）2、动态计算有几个未完成的任务3、点击复选框，实现选中或不选中效果（即完成或未完成）4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表5、双击列表中的内容，可对列表内容进行编辑编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取...
【vue3面试题】编写一个简单的待办事项列表
小创果技术交流博客
03-18 1251
要编辑已有任务，可以先双击任务文本，将该任务设置为“编辑”状态，此时任务文本会转换为一个文本框，让用户可以输入新的任务文本。在列表项中，我们使用了复选框来标记任务的完成状态，它的绑定值为todo.completed。在上述代码中，我们使用computed函数来创建一个计算属性completedCount，用于计算已完成的任务数量。上面的代码创建了一个简单的待办事项列表，包括一个表单来添加新任务，一个列表来显示当前所有任务，以及一个计数器来显示已完成的任务数量。函数来缓存计算结果，避免了不必要的计算。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值