（一）編輯item
現(xiàn)在data里添加一個(gè)newtodotitle的屬性，以防我們不想編輯回答原來的值，另一個(gè)就是無論是否在編輯狀態(tài)。輸入框總是會(huì)出現(xiàn)，再在data里添加一個(gè)edittodo的屬性，就是說，如果edittodo為空，則一定不在編輯狀態(tài)
image.png
然后再給I標(biāo)簽綁定一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊時(shí)，輸入框才會(huì)出現(xiàn)，
image.png
這里我們使用了一個(gè)全新的對(duì)象存儲(chǔ)，如果不這樣做的話，我們對(duì)item的任何修改都會(huì)反應(yīng)到editTodo，為防止這樣情況，我們要為editTodo創(chuàng)建一個(gè)全新的對(duì)象。
這時(shí)點(diǎn)擊I標(biāo)簽，發(fā)現(xiàn)所有的輸入框都出現(xiàn)了，我們需要再增加一個(gè)條件，只有item的ID和editTodo的ID相等時(shí)，才表示此item正在編輯，
image.png
然后將Item的值跟Input綁定，使用v-model，item 的 title 就會(huì)跟著編輯框輸入的值來變化了，而且想反悔隨時(shí)還原，因?yàn)橐呀?jīng)把編輯前的狀態(tài)存到editTodo里了，
接下來就是敲擊回車，先綁定一個(gè)editDown事件
image.png
因?yàn)閕tem.title就是跟隨輸入框變化的，所以直接把editTodo的值直接清空，這樣v-if的判斷也會(huì)失效，編輯框也會(huì)隱藏。
image.png
如果要取消，再綁定一個(gè)事件cancelEdit事件
image.png
把編輯的 item 標(biāo)題還原，我們的原始信息存在 editedTodo，取出來即可，然后把editTodo的值直接清空
image.png
（二）自動(dòng)聚焦
現(xiàn)在還有一個(gè)問題，就是我們點(diǎn)擊后，不能自動(dòng)聚焦，需要手動(dòng)才可以編輯，input 元素有一個(gè) focus 方法，問題是如何在vue中獲取，從而操作他，Vue 的自定義指令可以完成這個(gè)功能。官方文檔讓我們自己注冊(cè)一個(gè)指令，指令就是之前寫到的v-if，v-model這些，然后實(shí)現(xiàn)鉤子函數(shù)，指定被綁定元素的行為，按照官方文檔比葫蘆畫瓢實(shí)現(xiàn)一個(gè)focus指令，
image.png
然后就可以使用這個(gè)指令，綁定到input框，因?yàn)樵匾坏┏霈F(xiàn)一定要聚焦的，所以條件始終為 true。
image.png
這樣用戶體驗(yàn)就會(huì)好很多~
