Vue v-model 指令
與普通 JavaScript 相比，在 Vue 中處理表單更容易，因為 v-model 指令以相同的方式連線所有型別的輸入元素。
v-model 在輸入元素的 value 屬性和 Vue 例項中的資料值之間建立了一個連結。當您更改輸入時，資料會更新；當資料更改時，輸入也會更新（雙向繫結）。
雙向繫結
正如我們在上一頁的購物清單示例中已經看到的，v-model 為我們提供了雙向繫結，這意味著表單輸入元素會更新 Vue 資料例項，而 Vue 例項資料中的更改也會更新輸入。
下面的示例也演示了 v-model 的雙向繫結。
示例
雙向繫結：嘗試在輸入欄位中寫入，檢視 Vue 資料屬性值如何更新。也可以嘗試直接在程式碼中更改 Vue 資料屬性值，執行程式碼，然後檢視輸入欄位如何更新。
<div id="app">
<input type="text" v-model="inpText">
<p> {{ inpText }} </p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
inpText: '初始文字'
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
注意：v-model 的雙向繫結功能實際上可以透過 v-bind:value 和 v-on:input 的組合來實現
v-bind:value用於從 Vue 例項資料更新輸入元素，- 而
v-on:input用於從輸入更新 Vue 例項資料。
但是 v-model 更易於使用，所以我們將使用它。
動態複選框
我們在上一頁的購物清單中添加了一個複選框，用於標記商品是否重要。
在複選框旁邊，我們添加了一個文字，該文字始終反映當前的“重要”狀態，在“true”或“false”之間動態變化。
我們使用 v-model 新增此動態複選框和文字以改善使用者互動。
我們需要
- Vue 例項資料屬性中名為“important”的布林值
- 一個複選框，使用者可以在其中勾選商品是否重要
- 一個動態反饋文字，以便使用者可以看到商品是否重要
下面是“重要”功能的外觀，與購物清單分離。
示例
複選框文字是動態的，因此文字反映當前的複選框輸入值。
<div id="app">
<form>
<p>
重要商品？
<label>
<input type="checkbox" v-model="important">
{{ important }}
</label>
</p>
</form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
重要：false
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
讓我們將此動態功能包含到我們的購物清單示例中。
示例
<div id="app">
<form v-on:submit.prevent="addItem">
<p>新增商品</p>
<p>商品名稱： <input type="text" required v-model="itemName"></p>
<p>數量： <input type="number" v-model="itemNumber"></p>
<p>
重要？
<label>
<input type="checkbox" v-model="itemImportant">
{{ important }}
</label>
</p>
<button type="submit">新增商品</button>
</form>
<hr>
<p>購物清單：</p>
<ul>
<li v-for="item in shoppingList">{{item.name}}, {{item.number}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
important: false,
shoppingList: [
{ name: '西紅柿', number: 5, important: false }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
important: this.itemImportant
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
this.itemImportant = false
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
標記購物清單中已找到的商品
讓我們新增功能，以便可以將新增到購物清單中的商品標記為已找到。
我們需要
- 列表項對點選做出反應
- 將點選商品的 स्टेटस 更改為“已找到”，並使用此功能透過 CSS 在視覺上將商品移開並劃掉
我們建立一個包含所有需要找到的商品的列表，並在下方建立一個包含已找到並劃掉的商品的列表。我們實際上可以將所有商品放在第一個列表中，將所有商品放在第二個列表中，只需使用 v-show 和 Vue 資料屬性“found”來定義是在第一個列表還是第二個列表中顯示商品。
示例
將商品新增到購物清單後，我們可以假裝去購物，找到商品後點擊它們將其移除。如果意外點選了某個商品，可以透過再次點選該商品將其返回到“未找到”列表。
<div id="app">
<form v-on:submit.prevent="addItem">
<p>新增商品</p>
<p>商品名稱： <input type="text" required v-model="itemName"></p>
<p>數量： <input type="number" v-model="itemNumber"></p>
<p>
重要？
<label>
<input type="checkbox" v-model="itemImportant">
{{ important }}
</label>
</p>
<button type="submit">新增商品</button>
</form>
<p><strong>購物清單：</strong></p>
<ul id="ulToFind">
<li v-for="item in shoppingList"
v-bind:class="{ impClass: item.important }"
v-on:click="item.found=!item.found"
v-show="!item.found">
{{ item.name }}, {{ item.number}}
</li>
</ul>
<ul id="ulFound">
<li v-for="item in shoppingList"
v-bind:class="{ impClass: item.important }"
v-on:click="item.found=!item.found"
v-show="item.found">
{{ item.name }}, {{ item.number}}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
important: false,
shoppingList: [
{ name: '西紅柿', number: 5, important: false, found: false }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber,
important: this.itemImportant,
found: false
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
this.itemImportant = false
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
使用 v-model 使表單本身動態化
我們可以製作一個客戶從選單點餐的表單。為了方便客戶，我們只在客戶選擇點飲料後才顯示可供選擇的飲料。這可以說比一次性向客戶呈現選單中的所有商品更好。在此示例中，我們使用 v-model 和 v-show 使表單本身動態化。
我們需要
- 一個帶有相關輸入標籤和“訂購”按鈕的表單。
- 單選按鈕用於選擇“晚餐”、“飲料”或“甜點”。
- 選擇類別後，會出現一個下拉選單，其中包含該類別的所有商品。
- 選擇商品後，您會看到商品的圖片，您可以選擇數量並將其新增到訂單中。將商品新增到訂單後，表單會重置。
