在Vue的開發(fā)中，我們經(jīng)常要使用input表單來收集和展示數(shù)據(jù)。有時(shí)候我們希望這個(gè)input表單不可輸入，那么該怎么做呢？

<input type="text" :disabled="true" />

最簡單的方法就是使用HTML的disabled屬性對input進(jìn)行禁用。這樣用戶就無法編輯這個(gè)表單了。

<input type="text" readonly />

另外一種方式是使用input的readonly屬性，這個(gè)屬性的作用是只讀，用戶可以看到這個(gè)表單，但是無法編輯它。這種方式與disabled的區(qū)別在于，readonly屬性的表單可以被復(fù)制，但是disabled的表單無法被復(fù)制。

<template>
<div>
<input type="text" :value="item.name" :disabled="!isEditing" @keyup.enter="saveEdit" />
</div>
</template>
<script>
export default {
data() {
return {
isEditing: false,
item: {name: 'Vue'}
}
},
methods: {
edit() {
this.isEditing = true;
},
saveEdit() {
this.isEditing = false;
}
}
}
</script>

此外，在Vue中我們還可以根據(jù)狀態(tài)來動態(tài)禁用表單。比如在編輯狀態(tài)下，表單可以編輯；在保存或者取消編輯狀態(tài)時(shí)，表單禁用。在上面的代碼中，我們根據(jù)編輯狀態(tài)來動態(tài)禁用表單，即isEditing數(shù)據(jù)為true時(shí)，表單可編輯，為false時(shí)表單禁用。

<template>
<div>
<input type="text" v-model="name" v-on:keydown.enter.prevent @keydown.tab.prevent="tabEvent" />
</div>
</template>
<script>
export default {
data() {
return {
name: ''
}
},
methods: {
tabEvent() {
this.$refs.input.select();
}
}
}
</script>

還有一種場景，就是用戶在輸入完成后，希望按下Tab鍵，直接跳到下一個(gè)表單，而不是Enter鍵。這時(shí)候我們可以在Tab鍵的按下事件中，手動選中下一個(gè)表單。同時(shí)需要注意的是，在邏輯中需要添加@keydown.tab.prevent，來阻止頁面的默認(rèn)Tab切換功能。

到這里，多種Vue input不可輸入的方法就講解完了。不同的場景可以使用不同的方式來達(dá)到目的。