vue实现点击图标把文字转换成输入框

Vue 实现点击图标把文字转换成输入框的过程可以通过修改数据和使用条件渲染来实现。具体步骤如下：

1. 在 Vue 的 data 中定义一个变量，用来存储文字和是否显示输入框的状态。

data() {
  return {
    text: '点击这里',
    showInput: false
  }
}

2. 在模板中使用 v-if 指令根据 showInput 的值来决定显示文字还是输入框。

<template>
  <div>
    <span v-if="!showInput" @click="showInput = true">{{ text }}</span>
    <input v-if="showInput" v-model="text" @blur="showInput = false">
  </div>
</template>

3. 通过给文字所在的元素绑定点击事件，在点击时切换 showInput 的值，从而实现文字到输入框的转换。

<span v-if="!showInput" @click="showInput = true">{{ text }}</span>

4. 使用 v-model 指令将输入框的值绑定到 text 变量上，使输入的内容被更新到该变量中。

<input v-if="showInput" v-model="text" @blur="showInput = false">

5. 当输入框失去焦点时，使用 @blur 事件将 showInput 的值设为 false，使输入框隐藏。

<input v-if="showInput" v-model="text" @blur="showInput = false">

这样，当用户点击文字时，文字就会被转换成输入框，用户可以进行编辑。当输入框失去焦点时，输入框又会变回文字。以上就是使用 Vue 实现点击图标把文字转换成输入框的基本方法。