這個(gè)示例是模仿官網(wǎng)示例樣式和功能用我自己的方式寫(xiě)的，基本上沒(méi)有看官網(wǎng)的源碼，只參考自定義指令。讓我們一步步來(lái)探討一下。官網(wǎng)demo
要實(shí)現(xiàn)的功能
單條添加todo單條刪除todo雙擊編輯todo單條todo已完成相應(yīng)樣式狀態(tài)改變全部todo是已完成相應(yīng)樣式狀態(tài)改變清除全部已完成todos待辦todos數(shù)量顯示所有todos，已完成todos，未完成todos篩選 單條添加todo
<input type="text" class="todos_add" placeholder="What needs to be done?" @keyup.enter="addTodo($event.target)" //綁定enter事件 ref="currentInput">//操作input元素使enter一下之后清空輸入框內(nèi)容
data() {//一些初始化數(shù)據(jù)return {todolists: [],dataStatus: ["All", "Active", "Completed"],dataStatusIndex: 0,whichShow: true,defaultShow: true}
},
addTodo(e) { //添加todovar val = e.valueif (val === "") {return} //如果輸入內(nèi)容為空則立即返回this.todoLists = this.todoLists.concat({//使用concat這個(gè)api添加todovalue: val, //輸入內(nèi)容isEditing: false, //是否在編輯狀態(tài)isActive: false, //刪除X圖標(biāo)是否激活isChecked: false //是否已完成})this.$refs.currentInput.value = "" //按下enter添加todo之后把輸入框value清零window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存儲(chǔ)數(shù)據(jù)
},
把每條todo的對(duì)應(yīng)狀態(tài)都存在同一個(gè)對(duì)象當(dāng)中，在操作改變todo狀態(tài)的時(shí)候不會(huì)被統(tǒng)一處理，使得每條todo都有單獨(dú)的狀態(tài)。
單條刪除todo
<li class="content_todoList" v-for="(list,index) in todoLists" @mouseover="list.isActive = true" //鼠標(biāo)移入todo改變對(duì)應(yīng)todo的isActive狀態(tài) @mouseleave="list.isActive=false" //鼠標(biāo)移出todo改變對(duì)應(yīng)todo的isActive狀態(tài) <span class="el-icon-close content_todoList_delete" :class="{show: list.isActive}" //動(dòng)態(tài)綁定class使鼠標(biāo)移動(dòng)到某一todo顯示X圖標(biāo) @click="deleteTodo(index)"> //綁定刪除單條todo事件 </span> </li>
deleteTodo(index) { //刪除單條todothis.todoLists.splice(index, 1)//使用splice的apiwindow.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存儲(chǔ)數(shù)據(jù)//localStorage存儲(chǔ)數(shù)據(jù)
},
在每個(gè)li元素上綁定了鼠標(biāo)移入和移除的事件來(lái)動(dòng)態(tài)的改變每個(gè)todo的isActive，然后再使用isActive動(dòng)態(tài)顯示class。
雙擊編輯todo&&單條todo已完成
```<input type="checkbox" class="checkBox"
v-model="list.isChecked">//雙向綁定isChecked
<div class="content_todoList_main"
@dblclick="toEdit(list)" //雙擊事件
v-show="!list.isEditing" //切換元素
:class="{deleted:list.isChecked}"> //動(dòng)態(tài)綁定class該表已完成todo樣式
{{list.value}}
</div>
<input type="text" class="content_todoList_main main_input"
v-model="list.value" //雙向綁定可輸入value
v-show="list.isEditing" //切換元素
v-todo-focus="list.value" //自定義指令，雙擊之后自動(dòng)focus對(duì)焦
@blur="unEdit(list)"> //綁定blur失去焦點(diǎn)事件
methods: {
toEdit(obj) { //使添加的todothing可編輯
obj.isEditing = true
},
unEdit(obj) { //使添加的todothing不可編輯obj.isEditing = false
},
}
directives: { //自定義focus指令,需要一個(gè)binding參數(shù)做判斷
"todo-focus": function (el, binding) {
if (binding.value) {
el.focus()
}
}
}
```
通過(guò)每個(gè)todo里的isEditing屬性控制show和是否可編輯兩個(gè)狀態(tài)，雙擊div之后改變當(dāng)前todo的isEditing為true，從而顯示為input，input失去焦點(diǎn)之后再通過(guò)blur事件改為false。
通過(guò)todo的idChecked來(lái)控制是否已完成，從而動(dòng)態(tài)改變樣式。
全部todos已完成
class="icon-down el-icon-arrow-down" //使用element庫(kù)做向下箭頭icon
v-show="todoLists.length>0" //通過(guò)todoLists控制是否顯示向下箭頭icon
@click="selectAllTodos"></span> //全部已完成事件
selectAllTodos() { //設(shè)置所有todo為已完成,使用map的api通過(guò)todo的isChecked屬性操作this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}
待辦todos數(shù)量顯示
<div class="data_times" v-show="times === 0"> //times為0顯示item，大于0顯示items，細(xì)節(jié)注定成敗 <span>{{times}}</span>&nbsp item left </div> <div class="data_times" v-show="times > 0"> <span>{{times}}</span>&nbsp items left</div>
computed: {times() { //使用計(jì)算屬性計(jì)算待辦todos的次數(shù) let todoArr = this.todoListslet times = 0for (let i = 0; i < todoArr.length; i++) {if (todoArr[i].isChecked === false) {times++}}return times}
},
使用了計(jì)算屬性對(duì)todoLists計(jì)算，用for循環(huán)刷選出idChecked為true的累加，最后返回times。
清除全部已完成todos
```<div class="data_clearTodos"
@click="clearTodos"
v-show="times < todoLists.length"> //如果待辦事件次數(shù)小于總todoLists長(zhǎng)度就顯示“clear completed”
<a href="#">clear completed</a>
</div>
<div class="data_clearTodos"
@click="clearTodos"
v-show="times === todoLists.length"> //如果待辦事件次數(shù)等于總todoLists長(zhǎng)度就顯示“clear completed”
<a href="#"></a>
</div>
clearTodos() { //清空已完成的todoLists，使用filter的api進(jìn)行篩選
this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存儲(chǔ)數(shù)據(jù)
},
```
如果待辦todos的times小于todoLists長(zhǎng)度，就證明有已完成的todo，就可以顯示“clear completed”，如果相等就說(shuō)明沒(méi)有已完成的todo。
三種狀態(tài)篩選
所有todos，已完成todos，未完成todos篩選
```<li class="content_todoList"
v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">
<div class="data_status">
<a href="#"
:class="{active: index === dataStatusIndex}" //動(dòng)態(tài)class實(shí)現(xiàn)tab切換
v-for="(item ,index) in dataStatus" v-for循環(huán)
@click="switchStatus(index)" //切換不同tab顯示內(nèi)容
:key="index">
{{item}}
</a>
</div>
switchStatus(index) { //通過(guò)if條件判斷操作
this.dataStatusIndex = index
if (this.dataStatus[index] === "Active") {
this.defaultShow = false
this.whichShow = false
} else if (this.dataStatus[index] === "Completed") {
this.defaultShow = false
this.whichShow = true
} else if (this.dataStatus[index] === "All") {
this.defaultShow = true
}
},
<p>我這里是同時(shí)if條件句判斷操作，有點(diǎn)麻煩，目前還沒(méi)有想出來(lái)其他方案。在<code>li</code>元素使用三元運(yùn)算符和或運(yùn)算符進(jìn)行操作顯示不同狀態(tài)的todos。</p>
<h1>完整代碼</h1>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
input {outline: none;
}ul,
li,
ol {list-style: none;
}#app {width: 800px;height: 900px;margin: 0 auto;text-align: center;background-color: rgb(245, 245, 245);padding: 24px 0;
}#app .header {font-size: 48px;
}.content {width: 72%;margin: 0 auto;box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.25);position: relative;
}.icon-down {position: absolute;font-size: 24px;top: 16px;left: 16px;cursor: pointer;
}#app .content .todos_add {width: 100%;height: 56px;padding: 16px 56px;font-size: 24px;border: 1px solid transparent;
}.content_todoLists {position: relative;z-index: 3;
}.content_todoList {display: flex;flex-direction: row;border-top: 1px solid #ccc;font-size: 24px;padding: 8px;background-color: white;align-items: center;
}.checkBox {width: 20px;height: 20px;margin-left: 10px;
}.content_todoList_main {flex: 1;text-align: left;margin-left: 16px;font-size: 20px;padding: 6px 0;
}.main_input {position: relative;z-index: 1;
}.content_todoList_delete {position: absolute;right: 16px;color: rgb(252, 55, 55);font-weight: 500;display: none;cursor: pointer;
}.show {display: block;
}.deleted {text-decoration-line: line-through;color: #bbb;
}.show:hover {color: rgb(255, 0, 0);font-weight: 700;
}::-moz-placeholder {color: rgb(221, 218, 218);
}::-webkit-input-placeholder {color: rgb(221, 218, 218);
}:-ms-input-placeholder {color: rgb(221, 218, 218);
}.data {display: flex;justify-content: space-between;padding: 8px;font-size: 14px;font-weight: 300;color: rgb(145, 145, 145);
}a {text-decoration: none;color: rgb(145, 145, 145);
}.data_times {width: 73px;
}.data_clearTodos {width: 142px;
}.data_status a {display: inline-block;border: 1px solid transparent;border-radius: 2px;padding: 1px 4px;margin: 0 2px;
}.data_status a:hover {border-color: #bbb;
}.data_clearTodos a:hover {text-decoration-line: underline;
}.active {box-shadow: 0 0 1px black;
}
</style>
```
<div id="app"><header class="header">todos</header><div class="content"><span class="icon-down el-icon-arrow-down" v-show="todoLists.length>0" @click="selectAllTodos"></span><input type="text" class="todos_add" placeholder="What needs to be done?" @keyup.enter="addTodo($event.target)" ref="currentInput"><ul class="content_todoLists"><li v-for="(list,index) in todoLists" class="content_todoList" @mouseover="list.isActive = true" @mouseleave="list.isActive=false"v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)"><input type="checkbox" class="checkBox" v-model="list.isChecked"><div class="content_todoList_main" @dblclick="toEdit(list)" v-show="!list.isEditing" :class="{deleted:list.isChecked}">{{list.value}}</div><input type="text" class="content_todoList_main main_input" v-model="list.value" v-show="list.isEditing" v-todo-focus="list.value"@blur="unEdit(list)"><span class="el-icon-close content_todoList_delete" :class="{show: list.isActive}" @click="deleteTodo(index)"></span></li></ul><div class="data" v-show="todoLists.length>0"><div class="data_times" v-show="times === 0"><span>{{times}}</span>&nbspitem left</div><div class="data_times" v-show="times > 0"><span>{{times}}</span>&nbspitems left</div><div class="data_status"><a href="#" :class="{active:index === dataStatusIndex}" v-for="(item,index) in dataStatus" @click="switchStatus(index)" :key="index">{{item}}</a></div><div class="data_clearTodos" @click="clearTodos" v-show="times < todoLists.length"><a href="#">clear completed</a></div><div class="data_clearTodos" @click="clearTodos" v-show="times === todoLists.length"><a href="#"></a></div></div></div></div>
</body>
<script>let vm = new Vue({el: "#app",data() {return {todoLists: [],dataStatus: ["All", "Active", "Completed"],dataStatusIndex: 0,whichShow: true,defaultShow: true}},computed: {times() { //使用計(jì)算屬性計(jì)算待辦todos的次數(shù) let todoArr = this.todoListslet times = 0for (let i = 0; i < todoArr.length; i++) {if (todoArr[i].isChecked === false) {times++}}return times}},methods: {toEdit(obj) { //使添加的todo可編輯obj.isEditing = true},unEdit(obj) { //使添加的todo不可編輯obj.isEditing = false},addTodo(e) { //添加todovar val = e.valueif (val === "") {return} //如果輸入內(nèi)容為空則立即返回this.todoLists = this.todoLists.concat({ //使用concat這個(gè)api添加todovalue: val, //輸入內(nèi)容isEditing: false, //是否在編輯狀態(tài)isActive: false, //刪除X圖標(biāo)是否激活isChecked: false //是否已完成})this.$refs.currentInput.value = "" //按下enter添加todo之后把輸入框value清零window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //使用localStorage以JSON格式存儲(chǔ)數(shù)據(jù)},deleteTodo(index) { //刪除todothis.todoLists.splice(index, 1)window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json格式存儲(chǔ)數(shù)據(jù)},switchStatus(index) { //試下下方三個(gè)狀態(tài)切換，略麻煩this.dataStatusIndex = indexif (this.dataStatus[index] === "Active") {this.defaultShow = falsethis.whichShow = false} else if (this.dataStatus[index] === "Completed") {this.defaultShow = falsethis.whichShow = true} else if (this.dataStatus[index] === "All") {this.defaultShow = true}},clearTodos() { //清空已完成的todoListsthis.todoLists = this.todoLists.filter(todo => todo.isChecked === false)window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json格式存儲(chǔ)數(shù)據(jù)},selectAllTodos() { //設(shè)置所有todo為已完成this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)}},directives: { //自定義focus指令"todo-focus": function (el, binding) {if (binding.value) {el.focus()}}},created() {let myStorage = window.localStorage.getItem('content')this.todoLists = JSON.parse(myStorage) || [] //因?yàn)閠odoLists初始值是null,使用或運(yùn)算符，如果為null設(shè)為空數(shù)組}})
</script>
原文地址：https://segmentfault.com/a/1190000013026721
轉(zhuǎn)載于:https://www.cnblogs.com/lalalagq/p/9951729.html
總結(jié)
以上是生活随笔為你收集整理的Vue官网todoMVC示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
