另外:(input获得焦点的处理)
完整代码如下:
欢迎指正!!!
重点:
1.给td添加双击事件 @dblclick=“edit(k,sub_k,$event)” ,此函数的作用是将k,sub_k用下滑线组装起来,并赋值给 editKey。
2.td的两个元素: input元素用v-show=“editKey===k+‘_’+sub_k” (默认是隐藏的);p元素使用v-show=“editKey!==k+‘_’+sub_k” (默认是显示的)。
3.当dblclick 双击事件执行后,当前点击的td下的input中editKey===k+‘_’+sub_k为true,input会被推出来显示,
同时p中editKey!==k+‘_’+sub_k为false,所以p隐藏起来,于是达到编辑的效果。
4.input使用双向绑定 v-model=‘sub_item.a’,在修改input内容时,会自动更新到data中,修改后到console打印一下数据就清楚了。
5.input绑定焦点离开事件 @blur=“editDis”,触发后将editKey设置为null;于是input中editKey===k+‘_’+sub_k为false隐藏,同时p中editKey!==k+‘_’+sub_k为true显示