vue实现移动光标输入框变文本框

可以使用Vue的v-model指令和一个计算属性来实现这个功能。

首先，我们需要在data中定义一个isTextarea变量，用来表示当前输入框是文本框还是输入框。然后，我们可以在模板中使用v-if指令来根据isTextarea的值来渲染不同的输入框。

接着，我们需要添加一个事件监听器来监听输入框的focus事件。当输入框获得焦点时，我们将isTextarea设置为true，表示当前输入框为文本框。当输入框失去焦点时，我们将isTextarea设置为false，表示当前输入框为输入框。

最后，我们可以使用一个计算属性来根据isTextarea的值来绑定v-model指令到不同的输入框上。

下面是一个示例代码：

<template>
  <div>
    <div v-if="!isTextarea">
      <input type="text" v-model="inputValue" @focus="isTextarea = true">
    </div>
    <div v-else>
      <textarea v-model="inputValue" @blur="isTextarea = false"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      isTextarea: false
    }
  },
  computed: {
    inputType() {
      return this.isTextarea ? 'textarea' : 'input';
    }
  }
}
</script>

在这个示例中，当输入框获得焦点时，它会变成一个文本框，当它失去焦点时，它会变回一个输入框。同时，我们使用计算属性来根据isTextarea的值来绑定v-model指令到不同的输入框上。