vue中 双击编辑文本内容

在Vue中实现双击编辑文本内容可以使用v-on指令和v-if指令进行控制。

首先，在模板中将文本内容绑定到一个变量上，如下所示：

<template>
  <div>
    <span v-if="!isEditing" v-on:dblclick="isEditing = true">{{ text }}</span>
    <input v-if="isEditing" v-model="text" v-on:blur="isEditing = false" v-on:keyup.enter="isEditing = false">
  </div>
</template>

上述模板中，v-if指令用于根据编辑状态显示文本或输入框。v-on:dblclick指令用于在双击时将编辑状态设置为true，v-on:blur指令用于在输入框失去焦点时将编辑状态设置为false，v-on:keyup.enter指令用于在按下回车键时将编辑状态设置为false。

然后，在Vue实例中定义text和isEditing变量，并将text初始化为文本内容，isEditing初始化为false，如下所示：

<script>
export default {
  data() {
    return {
      text: '双击编辑文本内容',
      isEditing: false
    }
  }
}
</script>

这样就可以在Vue中实现双击编辑文本内容了。