在Vue開發中，雙擊輸入框來進行編輯操作是一個常見的需求。Vue提供了v-on指令用于監聽各種事件，其中就包括雙擊事件dblclick。結合v-model指令，就可以輕松實現雙擊編輯功能。

<template>
<div>
<input v-if="isEditing" v-model="tempValue" @keyup.enter="onSave" @blur="onSave">
<span v-else @dblclick="onEdit">{{ value }}</span>
</div>
</template>
<script>
export default {
props: ['value'],
data() {
return {
isEditing: false,
tempValue: ''
}
},
methods: {
onEdit() {
this.isEditing = true
this.tempValue = this.value
this.$nextTick(() =>this.$refs.input.focus())
},
onSave() {
if (!this.tempValue) {
this.$emit('input', this.value)
} else {
this.$emit('input', this.tempValue)
}
this.isEditing = false
}
}
}
</script>

上述代碼定義了一個component，props接收一個初始的value值，并將其渲染到span標簽中。通過isEditing來控制是顯示input還是span標簽，tempValue則是存儲編輯輸入的值。當雙擊span標簽時，會觸發onEdit方法，將isEditing設置為true，同時將tempValue設置為當前value的值。然后在nextTick的回調函數中獲取到input并調用focus方法，將光標置于輸入框中。

當用戶在編輯input中敲下enter鍵或者離開焦點時，會觸發onSave方法。首先判斷tempValue是否為空，如果為空，則表示用戶沒有做出任何修改，直接將value的值傳遞回去。否則，就將tempValue的值傳遞回去。最后將isEditing設置為false，就又回到了span標簽的狀態了。

以上就是使用Vue實現雙擊編輯的方法，簡單易懂，代碼量也不多，可以很好地應用于實際開發中。