Vue实现todoList功能

功能"/>

Vue实现todoList功能

具体的一些功能：

1.按下enter键，文本框里面的内容进到正在进行中里面，文本框内容清空。

2.按下复选框，为true的话进入到已完成任务栏里面，为false的话进入到正在进行任务栏里面。

3.双击内容实现可修改内容功能，按下esc返回为修改之前的数据，失去光标或者按下enter键确定修改内容。

4.按下删除键，可这一条的数据进行删除，同时把本地数据进行修改。

5.实现本地储存功能，页面或者浏览器关闭再打开不会丢失数据，所有的数据都储存到本地数据中。

6.实现原理：实际上删除、修改、增加都是对本地数据进行修改，然后再渲染到页面上。

CSS样式代码：

 <style>* {margin: 0;padding: 0;}ul,ol,li {list-style: none;}.nav {width: 100%;height: 60px;background-color: rgba(0, 0, 0, 0.8);display: flex;justify-content: center;align-items: center;}.nav h2 {color: white;}input[type="text"] {margin-left: 30px;width: 300px;height: 30px;border: 0;border-radius: 5px;color: burlywood;font-size: 18px;padding-left: 10px;}input[type="checkbox"] {width: 25px;height: 25px;}.list li {display: flex;justify-content: space-between;padding: 10px 100px;}ul,ol,li {list-style: none;margin: 5px 0;}li span {width: 150px;display: inline-block;text-align: left;color: rgb(14, 231, 220);}body {background-color: beige;}ol li {background-color: rgb(160, 153, 153);}ul li {background-color: coral;}button {width: 30px;height: 30px;line-height: 30px;text-align: center;font-size: 24px;}</style>

HTML页面结构代码：

<div id="app"><div class="nav"><h2>Todolist</h2><input type="text" v-model.trim="temp" @keyup.enter="addItem()" /></div><h2>正在进行，还有{{undoList.length}}项任务</h2><ul class="list"><li class="item" v-for="item in undoList" :key="item.name"><input type="checkbox" v-model="item.done" /><!-- 如果状态为0 显示文本 --><spanv-show="item.state==0"@dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span><!-- 如果状态为1 就显示输入框 --><inputtype="text"v-model="tempEdit"v-show="item.state==1"@keyup.esc="item.state=0;tempEdit=item.name"@keyup.enter="item.state=0;item.name=tempEdit"@blur="item.state=0;item.name=tempEdit"/><button @click="removeItem(item)">X</button></li></ul><h2>已经完成了{{doneList.length}}项任务</h2><ol class="list"><li class="item" v-for="item in doneList" :key="item.name"><input type="checkbox" v-model="item.done" /><!-- 如果状态为0 显示文本 --><spanv-show="item.state==0"@dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span><!-- 如果状态为1 就显示输入框 --><inputtype="text"v-model="tempEdit"v-show="item.state==1"@keyup.esc="item.state=0;tempEdit=item.name"@keyup.enter="item.state=0;item.name=tempEdit"@blur="item.state=0;item.name=tempEdit"/><button @click="removeItem(item)">X</button></li></ol></div>

JS代码：

 <script>var vm = new Vue({el: "#app",data() {return {//清单列表// getItem是获取本地存储数据，// ||"[]"如果获取不到转换为空的数组list: JSON.parse(localStorage.getItem("list") || "[]"),//临时要添加的数据temp: "",//修改框的临时数据tempEdit: "",};},methods: {//添加addItem() {// 如果文本问空，就返回if (this.temp == "") {return;}// unshfit 添加到最前面this.list.unshift({ name: this.temp, done: false, state: 0 });// 清空临时框this.temp = "";},// 删除removeItem(item) {// 弹出确认框let flag = window.confirm("你确定要删除吗？");// 执行删除if (flag) {// 查找符合条件元素的索引值let ind = this.list.indexOf(item);// splice从第ind删除1个this.list.splice(ind, 1);}},},computed: {//通过计算把现有的list数据计算出，以完成的和未完成的两条数据undoList() {// filter 数组的过滤函数，如果返回的结果为真，则当前遍历的数据保留// 否则就会被过滤掉return this.list.filter((item) => !item.done);},doneList() {return this.list.filter((item) => item.done);},},// 实现本地储存功能// 1.当数据list发生变化时候存// 2.当vue创建完毕的时候取watch: {list: {handler(nval) {// setItem 设置本地数据// JSON.stringify把js对象转换为json字符串// JSON.prase 把字符串转换为js对象localStorage.setItem("list", JSON.stringify(this.list));},deep: true,},},});</script>

页面效果：

 本地数据：

本次所实现的功能是借助Vue框架实现的，相应的功能都加上注释了。这个案例可以综合了很多以前学过的知识，是一个很值得做的一个案例，可以检测一下自己学习的知识怎么样，有没有掌握住，觉得有用的话，点个赞吧！！！