练习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
}
网友评论