0
点赞
收藏
分享

微信扫一扫

vue小项目-todolist


一、需求简述:

1、在输入框内输入待办事项,回车后添加到列表;

2、点击此事项可以将其状态改为已完成,再次点击变为未完成;

3、可以实现已完成、未完成筛选;

4、计数;

5、在全部列表中可以进行删除;

二、实现要点:

1、在输入框内输入待办事项,回车后添加到列表;

输入框监听回车按键,调用clickenter方法,向存放全部数据的数组rowdatas中push一组数据。

clickenter() {
this.rowdatas.push({
text: this.val,
col: false
});
this.val = "";
},

2、点击此事项可以将其状态改为已完成,再次点击变为未完成;

全部列表中遍历rowdatas数组,并根据每一条数据的col属性,判断是否已完成,进行绑定class,

在li中的p标签监听点击事件(防止事件冒泡带来的影响),调用gofinish(index),并将本条数据中的col属性取反,实现状态改变。

<li v-if="seled == '全部'" v-bind:class="{coled:rowdata.col}" v-for="(rowdata,index) in rowdatas">
<p @click="gofinish(index)">{{rowdata.text}}</p>
<button @click="del(index)">删除</button>
</li>
gofinish: function(index) {
this.rowdatas[index].col = !this.rowdatas[index].col;
},

3、可以实现已完成、未完成筛选;

设置两个新数组nofinish、finish用来存储已完成和未完成列表的数据,并多创建两个li遍历这两个数组,使用v-if判断select筛选中的值,来决定到底遍历哪一个数组。

<select v-model="seled">
<option :value="sel" v-for="(sel,index) in sels">{{sel}}</option>
</select>
<ul>
<li v-if="seled == '全部'" v-bind:class="{coled:rowdata.col}" v-for="(rowdata,index) in rowdatas">
<p @click="gofinish(index)">{{rowdata.text}}</p>
<button @click="del(index)">删除</button>
</li>
<li v-if="seled == '未完成'" v-bind:class="{coled:rowdata.col}" v-for="(rowdata,index) in nofinish">{{rowdata.text}}</li>
<li v-if="seled == '已完成'" v-bind:class="{coled:rowdata.col}" v-for="(rowdata,index) in finish">{{rowdata.text}}</li>
</ul>

4、计数

使用computed计算属性,计算ischange(当前数量)的值,判断select的选中的选项,如果是全部,那么返回数量为rowdatas数组的长度(全部事件数量),如果为未完成,那么从rowdatas中使用filter筛选出col属性为false的数据并赋值给nofinish数组,最后返回nofinish数组的长度。已完成同未完成理论。

computed: {
ischange: function() {
if (this.seled == "全部") {
return this.rowdatas.length
} else if (this.seled == "未完成") {
this.nofinish = this.rowdatas.filter(function(arr) {
return arr.col == false;
}
);
return this.nofinish.length
} else if (this.seled == "已完成") {
this.finish = this.rowdatas.filter(function(arr) {
return arr.col == true;
}
);
return this.finish.length
}
}
}

5、在全部列表中可以进行删除;

点击删除按钮调用del函数,从rowdatas中删除此条数据

del: function(index) {
this.rowdatas.splice(index, 1);
}

三、项目截图

vue小项目-todolist_小项目

四、项目代码

<template>
<div class="todolist2">
<header class="header">
<h1>{{message}}</h1><input placeholder="请输入待办事项" @keyup.enter="clickenter" type="text" v-model="val">
</header>
<div class="content">
<select v-model="seled">
<option :value="sel" v-for="(sel,index) in sels">{{sel}}</option>
</select>
<ul>
<li v-if="seled == '全部'" v-bind:class="{coled:rowdata.col}" v-for="(rowdata,index) in rowdatas">
<p @click="gofinish(index)">{{rowdata.text}}</p>
<button @click="del(index)">删除</button>
</li>
<li v-if="seled == '未完成'" v-bind:class="{coled:rowdata.col}" v-for="(rowdata,index) in nofinish">{{rowdata.text}}</li>
<li v-if="seled == '已完成'" v-bind:class="{coled:rowdata.col}" v-for="(rowdata,index) in finish">{{rowdata.text}}</li>
</ul>
</div>
<span>{{ischange}}</span>
</div>
</template>
<script>
export default {
name: "todolist2",
data() {
return {
message: "this is a todolist",
val: "",
rowdatas: [],
sels: ["全部", "已完成", "未完成"],
seled: "全部",
nofinish:[],
finish:[]
};
},
methods: {
clickenter() {
this.rowdatas.push({
text: this.val,
col: false
});
this.val = "";
},
gofinish: function(index) {
this.rowdatas[index].col = !this.rowdatas[index].col;
},
del: function(index) {
this.rowdatas.splice(index, 1);
}
},
computed: {
ischange: function() {
if (this.seled == "全部") {
return this.rowdatas.length
} else if (this.seled == "未完成") {
this.nofinish = this.rowdatas.filter(function(arr) {
return arr.col == false;
}
);
return this.nofinish.length
} else if (this.seled == "已完成") {
this.finish = this.rowdatas.filter(function(arr) {
return arr.col == true;
}
);
return this.finish.length
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
width: 100%;
height: 80px;
background-color: #000;
color: #ffffff;
}
.header h1 {
width: 50%;
float: left;
text-align: center;
}
.header input {
margin-top: 30px;
}
.coled {
background-color: #eeeeee;
}
ul li{
width:100%;
position: relative;
}
ul li button{
position: absolute;
top: 0;
right: 20%;
}
</style>



举报

相关推荐

0 条评论