當我們需要實現一個表單輸入的功能時，通常會使用input標簽來進行輸入。但是，有時候我們需要根據一些條件來切換input是否可讀寫，這時候就需要使用Vue來實現。

<template>
<div>
<input v-if="isWritable" v-model="inputValue" />
<span v-else>{{inputValue}}</span>
<button @click="toggleWritable">{{buttonText}}</button>
</div>
</template>

在上面的代碼中，我們使用了v-if和v-else來根據isWritable的值來切換顯示input或者span。同時，我們還使用了v-model來雙向綁定input的值。

<script>
export default {
data() {
return {
isWritable: true,
buttonText: '切換輸入狀態',
inputValue: ''
}
},
methods: {
toggleWritable() {
this.isWritable = !this.isWritable;
this.buttonText = this.isWritable ? '切換輸入狀態' : '切換顯示狀態';
}
}
}
</script>

在Vue的data中，我們定義了isWritable、buttonText和inputValue三個變量。isWritable用來控制是否可讀寫，buttonText用來顯示按鈕的文本，inputValue則是input的值。在methods中，我們定義了toggleWritable方法，用來切換isWritable的值以及修改buttonText的文本。

以上代碼只是基于Vue的基礎功能實現的最簡單的切換輸入狀態，實際上，在實際開發中我們還可以使用Vue的一些高級功能來更加靈活地實現我們想要的功能。比如，我們可以使用computed屬性來根據條件來計算出顯示的內容，這樣我們就可以避免在模板中使用大量的v-if和v-else來判斷。此外，我們還可以使用Vue的watch來監聽數據的變化，從而實現更加細粒度的控制。