用vue实现todolist效果,使用键盘事件添加内容,将内容存储在一个数组中,进行渲染,添加分页效果,点击±添加数量,点击上一页 ,下一页 ,页面按钮时实现响应的动态代码,实现todolist的方式

小桃子~

已于 2022-08-23 15:15:38 修改

阅读量498

点赞数 4

文章标签： vue.js 前端 javascript

于 2022-08-20 14:58:55 首次发布

本文链接：https://blog.csdn.net/m0_61692295/article/details/126439778

版权

实现vue中todolist的效果

要求:
-实现代办事项的添加
-实现正在进行的列表（计数、切换、删除）
- 实现已经完成的列表（计数、切换、删除）

效果:
在这里插入图片描述
代码实现部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app{
				width: 400px;
				height: 400px;
				margin: 100px auto;
			}
			.fanye{
				width: 400px;
				height: 100px;
			}
			.page-ye{
				width: 20px;
				height: 22px;
				display: inline-block;
				text-align: center;
				border: 1px solid #999;
			}
			.active{
				background: pink;
			}
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			添加新项目:
			<input type="text" @keyup.enter="tianjia" v-model="ip" placeholder="请输入添加的项目">

			
			<dx-component
			v-for="(item,index) in fen"
			:key="index"
			:name="item.name"
			:shu="item.shu"
			:price="item.price"
			:index="index"
			:item="item"
			
			v-on:jyi="fatherjian"
			v-on:jiayi="fatherjia"
			></dx-component>
					
			<div class="fanye">
				<button @click="shang">上一页</button>
				<span :class='item1==newp? "page-ye active" : "page-ye" ' v-for="(item1,index1) in yeshu" :key="index1" @click="dian(item1,index1)">{{index1+1}}</span>
				<button @click="xia">下一页</button>
			</div>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
		Vue.component("dx-component",{
			props:["name","index","shu","price","item"],
			template:`
				<div>
					<ul>
						<li>
						<span style="padding-right: 50px;">{{name}}{{index+1}}</span>
						<span style="padding-right:15px;">{{shu}}</span>
					
						<button @click="jian">-</button>
						<span>{{price}}</span>
						<button @click="jia">+</button>
						</li>
					</ul>
				</div>
			`,
			methods:{
				jian(){
					return this.$emit("jyi",this.item,this.price-1)
				},
				jia(){
					return this.$emit("jiayi",this.item,this.price+1)
				}
			}
		})
		
		new Vue({
			el:"#app",
			data(){
				return {
					ip:"",
					items:JSON.parse(localStorage.getItem("items"))||[],
					newp:JSON.parse(localStorage.getItem("newp"))|1,
					size:4,
				}
			},
			methods:{
				tianjia(){
				//判断如果input框中输入的有空格的话返回false,否则执行以下代码,执行完代码清空input框中的内容
					if(this.ip==""){
						return false
					}
					let obj= {
						id:1,name:this.ip,shu:"数量",price:1
					}
					this.items.push(obj)
					this.ip=""
				},
				//点击页面按钮时将值重新赋值给按钮
				dian(item1,price1){
					this.newp=item1
				},
				//点击-号按钮时点击的事件
				fatherjian(item,price){
					if(price<=0){
						item.price=0
					}else{
						item.price-=1
					}
				},
				//点击+号按钮时点击的事件
				fatherjia(item,price){
					item.price+=1
				},
				//点解上一页执行的代码
				shang(){
					if(this.newp<=1){
						this.newp=Math.ceil(this.items.length/this.size)
					}else{
						this.newp-=1
					}
				},
				//点击下一页执行的代码
				xia(){
					if(this.newp>=Math.ceil(this.items.length/this.size)){
						this.newp=1
					}else{
						this.newp+=1
					}
				}
				
			},
			computed:{
				//页数
				yeshu:function(){
					return Math.ceil(this.items.length/this.size)
				},
				//分页设置
				fen:function(){
					let after = (this.newp-1)*this.size
					let end = after+this.size
					return this.items.slice(after,end)
				}
			},
			watch:{
				items:{
					deep:true,
					handler(value){
						localStorage.setItem("items",JSON.stringify(value))
					}
				},
				newp:{
					deep:true,
					handler(value){
						localStorage.setItem("newp",JSON.stringify(value))
					}
				}
			}
		})
	</script>
</html>

总结: 使用键盘事件添加内容,将内容存储在一个数组中,进行渲染,添加分页效果,点击±添加数量,点击上一页 ,下一页 ,页面按钮时实现响应的动态代码,实现todolist的方式很多,小女子不才,还请大神多多指点一二.

小桃子~

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
用vue实现todolist效果,使用键盘事件添加内容,将内容存储在一个数组中,进行渲染,添加分页效果,点击±添加数量,点击上一页 ,下一页 ,页面按钮时实现响应的动态代码,实现todolist的方式

用vue实现todolist效果,使用键盘事件添加内容,将内容存储在一个数组中,进行渲染,添加分页效果,点击±添加数量,点击上一页 ,下一页 ,页面按钮时实现响应的动态代码,实现todolist的方式很多,小女子不才,还请大神多多指点一二.
复制链接

扫一扫