Vue.js实现toDoList列表功能

最新推荐文章于 2022-07-06 20:32:26 发布

来杯仙气儿

最新推荐文章于 2022-07-06 20:32:26 发布

阅读量237

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_46212240/article/details/104977225

版权

toDoList是一个经典的案例，原生js，jquery和vue.js都可以实现此功能，我们先来看看用jquery实现此功能的代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" class="sendBtn">
		<h2>未完成</h2>
		<ul class="list1">
			<!-- <li> 
				<input type="checkbox" name="" id="" value="" />
				<span id="">
					看电视
				</span>
				<button type="button">删除</button>
			</li> -->
		</ul>

		<h2>已完成</h2>
		<ul class="list2">
			<!-- <li> 
				<input type="checkbox" name="" id="" value="" checked="checked"/>
				<span id="">
					打游戏
				</span>
				<button type="button">删除</button>
			</li> -->
		</ul>

		<script src="./lib/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//jq  90行js todolist 
			let sendBtn = $('.sendBtn');
			let arr = [
				// status true 表示已完成
				{
					name: '看电视',
					status: false
				},
				{
					name: '玩游戏',
					status: true
				},
			];
			render()
			//发送按钮 
			sendBtn.change(function(){
				let name = sendBtn.val();
				let obj = {
					name: name,
					status: false
				};
				arr.push(obj);
				render()
			})
			//根据数据 arr  渲染页面 产生页面
			function render() {
				let list1 = $('.list1')
				let list2 = $('.list2')

				//拼字符串
				let list1Html = '';
				let list2Html = '';
				for (let i = 0; i < arr.length; i++) {
					let obj = arr[i];
					if (obj.status == false) {
						list1Html +=
							`
						<li>
							<input type="checkbox" name="" id="" value="" data-name="${obj.name}"/>
							<span id="">
								${obj.name}
							</span>
							<button type="button" class="dBtn" data-name="${obj.name}">删除</button>
						</li>
						`
					} else {
						list2Html +=
							`
						<li>
							<input type="checkbox" name="" id="" value="" checked="checked" data-name="${obj.name}"/>
							<span id="">
								${obj.name}
							</span>
							<button type="button" class="dBtn" data-name="${obj.name}">删除</button>
						</li>
						`
					}

				}
				
				list1.html(list1Html)
				list2.html(list2Html)
				//删除按钮
				$('.dBtn').click(function(){
					console.log(11)
					let name = $(this).attr('data-name');
					arr = arr.filter(v=>v.name !== name)
					render()
				})
				
				//修改按钮
				$('input[type=checkbox]').change(function(){
					点击的是 未完成的列表
						//修改数组对应的元素的 属性值, 然后渲染页面
					let name = $(this).attr('data-name')
					let obj = arr.find(v=>v.name === name);
					console.log(obj)
					obj.status = this.checked;
					render()
				})
			}
		</script>
	</body>
</html>

可以看到，用jquery实现此功能的代码量是比较大的，更不用说原生的js代码了。vue框架十分强大，我们来看看vue实现此效果的代码。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../base/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="box">
		<!-- 输入框 -->
		<input type="text" v-model="iptText" @change="inputChange()"><br>
		<!-- toDoList列表 -->
		<h2>toDoList列表</h2>
		<div class="toDoList" id="toDoList">
			<ul>
				<li v-for="todo,index in todolist" v-if="todo.state===false">
					<input type="checkbox"  id="checkBox1" @change="ckChange(index,true)"/><span>{{todo.name}}</span>
					<button type="button" @click="deleteDate(index)">删除</button>
				</li>
			</ul>
		</div>
		<hr >
		<!-- finish列表 -->
		<h2>Finish列表</h2>
		<div class="finish" id="finish">
			<ul>
				<li v-for="finish,index in todolist" v-if="finish.state===true">
					<input type="checkbox" id="checkBox2" checked="checked" @change="ckChange(index,false)"/><span>{{finish.name}}</span>
					<button type="button" @click="deleteDate(index)">删除</button>
				</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		let vm=new Vue({
			el:'#box',
			data:{
				iptText:'', //存输入框的内容
				todolist:[
					{name:'今天要打代码...',state:false},
					{name:'明天要接着打代码哦...',state:false},
					{name:'昨天已经过去了',state:true}
				]
			},
			methods:{
				//点击checkbox时候的变化方法
				ckChange(index,state){
					//知道自己获取的是数组里面的哪个对象
					// console.log(index)
					//找到对应的对象数据
					let todo1=this.todolist[index];
					//点击了checked复选框之后要改变这个数据的状态
					todo1.state=state;
				},
				//删除的方法,删除对应的下标的元素
				deleteDate(index){
					this.todolist.splice(index,1)
				},
				//获取到输入框内容的的方法
				inputChange(){
					let iptList={name:this.iptText,state:false};
					this.todolist.push(iptList);
					//将输入框的内容清空
					this.iptText=''
				}
			}
		})
	</script>
	</body>
</html>

vue.js的js代码部分也就20行左右就能实现此效果，完美！！！！

来杯仙气儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js实现toDoList列表功能

toDoList是一个经典的案例，原生js，jquery和vue.js都可以实现此功能，我们先来看看用jquery实现此功能的代码。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <bod...
复制链接

扫一扫