Vue.js 3 官方入門語法教學筆記 [4] - Form Bindings 表單綁定 | 學習筆記
· 閱讀時間約 2 分鐘
Form Bindings 表單綁定
使用 v-bind 和 v-on 結合，我們可以對表單輸入元素創建雙向綁定：
<template>
<input :value="text" @input="onInput">
<p>{{ text }}</p>
</template>
<script setup>
import { ref } from 'vue'
const text = ref('')
function onInput(e) {
// v-on 處理器接收原生 DOM 事件作為參數
text.value = e.target.value
}
</script>
當您在輸入框中輸入時，您應該會看到 <p> 中的文字隨之更新。
為了簡化雙向綁定，Vue 提供了 v-model 指令，它本質上是上述代碼的語法糖：
<template>
<input v-model="text">
<p>{{ text }}</p>
</template>
<script setup>
import { ref } from 'vue'
const text = ref('')
</script>
v-model 會自動同步 <input> 的值與綁定的狀態，因此我們不再需要為此使用事件處理器。
v-model 不僅適用於文本輸入，還適用於其他輸入類型，如復選框 (checkbox)、單選按鈕 (radio button) 和下拉選單 (select dropdown)。有關更多細節，請參閱官方指南 - 表單綁定。
現在，我們試著將代碼重構為使用 v-model。
SFC/Composition 版本：
<script setup>
import { ref } from 'vue'
const text = ref('')
</script>
<template>
<input v-model="text" placeholder="Type here">
<p>{{ text }}</p>
</template>
SFC/Options 版本：
<script>
export default {
data() {
return {
text: ''
}
},
methods: {
onInput(e) {
this.text = e.target.value
}
}
}
</script>
<template>
<input :value="text" @input="onInput" placeholder="Type here">
<p>{{ text }}</p>
</template>
HTML/Options 版本：
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
text: ''
}
},
methods: {
onInput(e) {
this.text = e.target.value
}
}
}).mount('#app')
</script>
<div id="app">
<input :value="text" @input="onInput" placeholder="Type here">
<p>{{ text }}</p>
</div>
HTML/Composition 版本：
<script type="module">
import { createApp, ref } from 'vue'
createApp({
setup() {
const text = ref('')
function onInput(e) {
text.value = e.target.value
}
return {
text,
onInput
}
}
}).mount('#app')
</script>
<div id="app">
<input :value="text" @input="onInput" placeholder="Type here">
<p>{{ text }}</p>
</div>