用vue实现点击编辑按钮将li变为可以输入文本的input,如何实现?

Question

如图:
点击编辑按钮,将这个框变成能输入的状态,blur时保存,再变为普通的li,
求给一点思路

Answer 1

1楼的方法棒棒哒
<template>
<li v-if='flag'><span @click='edit()'>点击一下</span></li>
<input type="text" v-else @change='input()'>
</template>
export default{
data(){
flag:true
},
methods:{

edit(){
   this.flag=false;
},
input(){
   this.flag=true;
},

}

}

Answer 2

定义一个flag，然后用 <li v-if="flag"> </li> <input v-else>这种来处理。