方案一:给h2添加contenteditable="true"属性,用v-on指令绑定h2 的input事件,调用Vue实例中的方法将用户新输入的值重赋给data
光标乱跳.png
问题:用户界面,编辑时每输入一个字符光标会自动跳到最前面,如图右下角所示。除非把原有的内容清空后重新输入才不会。
方案二:<input v-model="message">
问题:input长度有限,超过input的size的内容看不到。
方案二-改进:既然这样,那么input框只在编辑时出现,编辑完隐藏,换言之,input就是拿来监听输入的。
start.png
final.png