实现todoList更新todo项功能

练习todolist 编辑 todoItem项的内容

方案1

设置一个隐藏的input元素，其中存入与显示值this.item.value相同的值，并使用v-model实现数据双向绑定，点击span标签时将原本的显示值隐藏，展示input编辑框，修改todoItem内容，当input失去焦点后隐藏，并将span标签显示，此时span中存入的就是修改后的新内容。

emmmm，看起来很复杂，所以懒人会找到更简单的方案2

方案2

设置contenteditable属性可以使文本被点击后变为可编辑状态，失去焦点后调用update函数更新todoItem内容

属性文档：
https://www.w3school.com.cn/tags/att_global_contenteditable.asp

<span contenteditable="true" @blur="update" ref="val">{{this.item.value}}</span>

当文字失去焦点时页面显示更新后的内容

如何获取到更新后的内容--踩坑

使用contenteditable="true"属性编辑后的文字不能直接通过.value来获取内容

解决办法

通过.innerHTML或者.innerText来取值

update () {
        let newVal = this.$refs.val.innerHTML
        this.item.value = newVal
      }