使用edit为true或false来控制显示文本和input
data() {
return {
edit: false,
description: "你好！"
}
}
使用绑定class来切换icon
<span v-show="!edit">({{ description }})</span>
<el-input v-show="edit" v-model="description"></el-input>
<i
:class="{'el-icon-edit': !edit, 'el-icon-check': edit}"
@click="edit = !edit"
></i>
效果如下图
点击编辑icon切换输入框
