Vue 實現(xiàn)ToDoList

本文實現(xiàn)一個用Vue腳手架搭建項目、實現(xiàn)簡單的ToDoList功能

• computed：計算屬性
• filters：過濾器
• localStorage：本地存儲

技術(shù)點
vue+localStorage
功能
回車添加任務(wù)
雙擊編輯任務(wù)
編輯完成按回車保存 Esc撤銷編輯
點擊復(fù)選框表示已經(jīng)完成任務(wù)
點擊X刪除任務(wù)
所有任務(wù)、已經(jīng)完成任務(wù)、未完成任務(wù)可篩選

具體代碼演示如下

<template><div><header><section><label for="title"> ToDoList</label><input type="text" id="title" placeholder="添加ToDo" v-model="iptVal" @keydown.13="add"></section></header><h3>未完成({{no}})</h3><ul><li v-for="(item,index) in list" :key="index" v-show="!item.done"><input type="checkbox" @click.prevent="change(item,true)"><span v-if="index !== iptIndex" @dblclick="update(item,index)">{{item.val}}</span><inputv-if="index === iptIndex"type="text"v-model="item.val"@keydown.enter="enter(item,index)"autofocus@keydown.esc="esc(item,index)"><span class="time">{{item.time | timeFilter}}</span><span @click="del(index)" class="del">×</span></li></ul><h3>已經(jīng)完成({{yes}})</h3><ul><li v-for="(item,index) in list" :key="index" v-show="item.done"><input type="checkbox" checked @click.prevent="change(item,false)"><span v-if="index !== iptIndex" @dblclick="update(item,index)">{{item.val}}</span><inputv-if="index === iptIndex"type="text"v-model="item.val"@keydown.enter="enter(item,index)"autofocus@keydown.esc="esc(item,index)"><span class="time">{{item.time | timeFilter}}</span><span @click="del(index)" class="del">×</span></li></ul><footer><select v-model="select" @change="selected"><option value="">請選擇</option><option value="all">全部數(shù)據(jù)</option><option value="no">未完成</option><option value="yes">已完成</option></select><ul><li v-for="(item,index) in selist" :key="index">{{item.val}}</li></ul></footer></div> </template><script>export default {//計算屬性 用來計算已完成 未完成的數(shù)量computed: {no() {let n = 0;this.list.map(item => {if (!item.done) {n++;}});return n;},yes() {let n = 0;this.list.map(item => {if (item.done) {n++;}});return n;}},//時間過濾filters: {timeFilter(ms) {let time = new Date();let nowTime = time.getTime(); //現(xiàn)在時間的let cha = nowTime - ms; //差值let months = cha / 1000 / 60 / 60 / 24 / 30;let week = cha / 1000 / 60 / 60 / 24 / 7;let days = cha / 1000 / 60 / 60 / 24;let hours = cha / 1000 / 60 / 60;let minutes = cha / 1000 / 60;let str = '';if (months >= 1) {str = `${parseInt(months)}月前`} else if (week >= 1) {str = `${parseInt(week)}周前`} else if (days >= 1) {str = `${parseInt(days)}天前`} else if (hours >= 1) {str = `${parseInt(hours)}小時前`} else if (minutes >= 1) {str = `${parseInt(minutes)}分鐘前`} else {str = '剛剛'}return str;}},data() {return {list: JSON.parse(localStorage.getItem('six')) || [],iptVal: "", //輸入框的值iptIndex: -1, //設(shè)置一個固定值 用來實現(xiàn)雙擊顯示和隱藏temp: '', //聲明一個空值用來保存esc取消時的數(shù)據(jù)select: '', //篩選 輸入框改變時 存儲 yes no allselist: [], //篩選數(shù)據(jù)的展示}},methods: {add() {this.list.push({val: this.iptVal,done: false, //每增加一條數(shù)據(jù) done 為falsetime: new Date().getTime() //每增加一條新數(shù)據(jù),增加對應(yīng)的時間戳});this.save(); // 同步保存到本地存儲this.iptVal = '';},save() { //本地存儲localStorage.six = JSON.stringify(this.list)},//刪除del(index) {this.list.splice(index, 1);this.save()},// 雙擊改變update(item, index) {this.iptIndex = index;//給temp 賦值 值為item.valthis.temp = item.val;},//按回車 保存數(shù)據(jù)enter(item, index) {this.save(); //先保存到本地存儲 順序不能變this.list.splice(index, 1, item); //頁面展示的數(shù)據(jù)改變this.iptIndex = -1; //iptIndex值還原,讓input框隱藏},//按ESC取消esc(item, index) {item.val = this.temp; //現(xiàn)在temp里已經(jīng)有值 然后再賦值給item.valthis.iptIndex = -1; //iptIndex值還原,讓input框隱藏},//點擊復(fù)選框改變 未完成改為已完成 已完成改為未完成change(item, checked) {item.done = !!checked;this.save()},//篩選selected() {// console.log(this.select);this.selist = []; //清空數(shù)組里的值,不然每次都追加switch (this.select) {case "all": //全部 展示this.list.map(item => { //遍歷this.selist.push(item) //添加到selist數(shù)組});break;case "no": //未完成展示this.list.map(item => { //遍歷if (!item.done) {this.selist.push(item) //添加到selist數(shù)組}});break;case "yes": //已完成展示this.list.map(item => { //遍歷if (item.done) {this.selist.push(item) //添加到selist數(shù)組}});break;}}}} </script><style>header {height: 50px;background: rgba(47, 47, 47, 0.98);}.time {color: #dddddd;margin-left: 10px;}section {width: 600px;padding: 0 10px;display: flex;margin: 0 auto;}label {float: left;width: 100px;line-height: 50px;color: #DDD;font-size: 24px;cursor: pointer;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}.del {color: red;margin-left: 50px;}header input {float: right;width: 60%;height: 24px;margin-top: 12px;text-indent: 10px;border-radius: 5px;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;border: none;outline: none;margin-left: 10px;} </style>

總結(jié)

以上是生活随笔為你收集整理的Vue 实现ToDoList的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。