EP10 - 表單輸入綁定

Yidti-avatar-img
Yidti
發佈於多拉B夢只能出布
更新 發佈閱讀 1 分鐘
Form Input Bindings，綁定是指前後端串接起來了嗎？
看到綁定這種字眼，就想到前後端應該是數據保持同步更新了！
這樣是不是就省去很多處理資料需要同步的內容了～

處理前端表單時，我們常常需要同步表單輸入元素的狀態與 JavaScript 中的對應狀態。手動綁定值和變更事件監聽器可能會很麻煩：

<template>
  <input
    :value="text"
    @input="event => text = event.target.value">
</template>

v-model 指令幫助我們簡化上述過程：

<template>
  <input v-model="text">
</template>

此外，v-model 可以用於不同類型的輸入元素，包括 <textarea> 和 <select> 元素。根據所使用的元素，v-model 自動擴展到不同的 DOM 屬性和事件對：

  • <input> 元素的文本類型和 <textarea> 元素使用 value 屬性和 input 事件；
  • <input type="checkbox"> 和 <input type="radio"> 使用 checked 屬性和 change 事件；
  • <select> 使用 value 屬性和 change 事件。
注意：v-model 會忽略在任何表單元素上發現的初始 value、checked 或 selected 屬性。它總是將當前綁定的 JavaScript 狀態作為真實來源。你應該在 JavaScript 端使用響應式 API 宣告初始值。

基本用法 - Basic Usage

文字 - Text

<template>
  <p>Message is: {{ message }}</p>
  <input v-model="message" placeholder="edit me" />
</template>

Try it in the playground

注意：對於需要輸入法 (IME) 的語言（如中文、日文、韓文等），你會注意到在輸入法組成期間，v-model 不會更新。如果你想在這些更新時也能做出響應，請使用你自己的 input 事件監聽器和值綁定，而不是使用 v-model。

多行文本 - Multiline text

<template>
  <span>Multiline message is:</span>
  <p style="white-space: pre-line;">{{ message }}</p>
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
</template>

Try it in the playground

注意：在 <textarea> 內插值不會生效。請使用 v-model。
<template>
  <!-- 錯誤 -->
  <textarea>{{ text }}</textarea>

  <!-- 正確 -->
  <textarea v-model="text"></textarea>
</template>

核取方塊 - Checkbox

單個核取方塊，布林值：

<template>
  <input type="checkbox" id="checkbox" v-model="checked" />
  <label for="checkbox">{{ checked }}</label>
</template>

Try it in the playground

我們也可以將多個核取方塊綁定到同一個陣列或 Set 值：

const checkedNames = ref([])
<template>
  <div>Checked names: {{ checkedNames }}</div>

  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>

  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>

  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
</template>

在這種情況下，checkedNames 陣列將始終包含當前選中的核取方塊的值。

Try it in the playground

單選按鈕 - Radio

<template>
  <div>Picked: {{ picked }}</div>

  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>

  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
</template>

Try it in the playground

下拉選單 - Select

單選：

<template>
  <div>Selected: {{ selected }}</div>

  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

Try it in the playground

注意：如果 v-model 表達式的初始值不匹配任何選項，<select> 元素將呈現為“未選中”狀態。在 iOS 上，這將導致用戶無法選擇第一項，因為 iOS 在這種情況下不會觸發 change 事件。因此，建議提供一個帶有空值的禁用選項，如上例所示。

多選（綁定到陣列）- Multiple select (bound to array):

<template>
  <div>Selected: {{ selected }}</div>

  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

Try it in the playground

可以使用 v-for 動態渲染選項：

const selected = ref('A')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])
<template>
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>

  <div>Selected: {{ selected }}</div>
</template>

Try it in the playground

值綁定 - Value Bindings

對於單選按鈕、核取方塊和下拉選項，v-model 綁定的值通常是靜態字符串（或對於核取方塊是布林值）：

`<template>
  <!-- 當選中時，`picked` 是字符串 "a" -->
  <input type="radio" v-model="picked" value="a" />

  <!-- `toggle` 是 true 或 false -->
  <input type="checkbox" v-model="toggle" />

  <!-- 當選擇第一個選項時，`selected` 是字符串 "abc" -->
  <select v-model="selected">
    <option value="abc">ABC</option>
  </select>
</template>

但有時我們可能希望將值綁定到當前活動實例上的動態屬性。我們可以使用 v-bind 來實現。此外，使用 v-bind 可以讓我們將輸入值綁定到非字符串值。

核取方塊 - Checkbox

<template>
  <input
    type="checkbox"
    v-model="toggle"
    true-value="yes"
    false-value="no" />
</template>

true-value 和 false-value 是 Vue 特有的屬性，只適用於 v-model。在此範例中，當核取方塊被勾選時，toggle 屬性的值將被設置為 'yes'，當未勾選時，則設置為 'no'。你也可以使用 v-bind 將它們綁定到動態值：

<template>
  <input
    type="checkbox"
    v-model="toggle"
    :true-value="dynamicTrueValue"
    :false-value="dynamicFalseValue" />
</template>
提示：true-value 和 false-value 屬性不會影響輸入的 value 屬性，因為瀏覽器在表單提交時不包括未勾選的框。為了保證在表單中提交的值是其中之一（例如 "yes" 或 "no"），請改用單選按鈕。

單選按鈕 - Radio

<template>
  <input type="radio" v-model="pick" :value="first" />
  <input type="radio" v-model="pick" :value="second" />
</template>

當第一個單選按鈕被選中時，pick 將被設置為 first 的值；當第二個單選按鈕被選中時，pick 將被設置為 second 的值。

下拉選單選項 - Select Options

<template>
  <select v-model="selected">
    <!-- 內聯物件字面值 -->
    <option :value="{ number: 123 }">123</option>
  </select>
</template>

v-model 也支持非字串值的綁定！在上述範例中，當選項被選中時，selected 將被設置為物件字面值 { number: 123 }。

Modifiers

.lazy

預設情況下，v-model 會在每個輸入事件後同步數據（IME 輸入法組合除外）。可以添加 lazy 修飾符來改為在更改事件後同步數據：

<template>
  <!-- 在 "change" 事件後同步而非 "input" 事件 -->
  <input v-model.lazy="msg" />
</template>

.number

如果希望用戶輸入自動轉換為數字類型，可以在 v-model 管理的輸入中添加 number 修飾符：

<template>
  <input v-model.number="age" />
</template>

如果值無法通過 parseFloat() 解析，則使用原始的字串值。特別是，當輸入為空時（例如用戶清空輸入框後），將返回一個空字串。此行為與 DOM 屬性 valueAsNumber 不同。

如果輸入的 type 為 "number"，則會自動應用 number 修飾符。

.trim

如果希望自動修剪用戶輸入中的空白字符，可以在 v-model 管理的輸入中添加 trim 修飾符：

<template>
  <input v-model.trim="msg" />
</template>

v-model 與組件 - v-model with Components

如果你還不熟悉 Vue 的組件，可以暫時跳過這部分。

HTML 的內建輸入類型並不總是能滿足你的需求。幸運的是，Vue 組件允許你構建可重用的、具有完全自定義行為的輸入。這些輸入甚至可以與 v-model 一起使用！要了解更多，請閱讀組件指南中的 v-model 用法部分。

Q: v-bind 跟 v-model差異？

v-bind 指令主要用於綁定 HTML 屬性到 Vue 的數據。

<!-- 綁定 HTML 屬性 -->
<img v-bind:src="imageSrc" alt="Description">

<!-- 簡寫形式 -->
<img :src="imageSrc" alt="Description">

<!-- 綁定樣式 -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<!-- 綁定類別 -->
<div :class="{ active: isActive }"></div>

v-model 指令主要用於實現雙向數據綁定，特別是在表單元素中使用。

<!-- 單行文字輸入 -->
<input v-model="message" placeholder="edit me">

<!-- 多行文字輸入 -->
<textarea v-model="message" placeholder="add multiple lines"></textarea>

<!-- 單選框 -->
<input type="checkbox" v-model="checked">

<!-- 單選按鈕 -->
<input type="radio" v-model="picked" value="option1">
<input type="radio" v-model="picked" value="option2">

<!-- 下拉選單 -->
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

差異總結

  • v-bind 用於綁定 HTML 屬性、樣式或類別到 Vue 數據的單向綁定指令。
  • v-model 用於實現表單元素與 Vue 數據雙向綁定指令，使表單輸入和數據同步更新。

這兩個指令在特定情況下可以互補使用，以實現更複雜的數據綁定需求。

使用 v-bind 綁定動態屬性

<template>
  <div>
    <!-- 靜態屬性綁定 -->
    <input type="radio" v-model="picked" value="a">
    <!-- 動態屬性綁定 -->
    <input type="radio" v-model="picked" :value="dynamicValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      picked: null,
      dynamicValue: 'b'
    };
  }
}
</script>

在上面的示例中，第一個單選按鈕有一個靜態的 value 屬性值 'a'，而第二個單選按鈕的 value 屬性是動態的，通過 v-bind 綁定到實例的 dynamicValue 屬性。這樣，當 dynamicValue 的值改變時，單選按鈕的 value 也會相應更新。

綁定非字符串值

<template>
  <div>
    <!-- 綁定一個對象作為選擇值 -->
    <select v-model="selected">
      <option :value="{ number: 123 }">123</option>
      <option :value="{ number: 456 }">456</option>
    </select>

    <!-- 綁定一個布爾值 -->
    <input type="checkbox" v-model="toggle" :true-value="true" :false-value="false">
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      toggle: false
    };
  }
}
</script>

在這個例子中：

  • 下拉選單中的選項綁定的是對象 { number: 123 } 和 { number: 456 }，而不是簡單的字符串。當選中某個選項時，selected 將會設置為相應的對象。
  • 單選按鈕綁定的是布爾值 true 和 false。當選中時，toggle 將會設置為 true，未選中時，toggle 會設置為 false。

使用 v-bind 可以讓我們綁定複雜的數據類型，而不僅僅是字符串，這在處理更複雜的應用場景時非常有用。

講了一些東西，單獨分開講好像沒問題～
並在一起講開始有點模糊了～就像v-bind跟v-model
好像了解了！但其實好像沒這麼了解www ~
卡關的人生多拉B夢只能出布Vue 什麼毛
留言
avatar-img
留言分享你的想法！
avatar-img
卡關的人生
4會員
73內容數
分享生活趣事～
卡關的人生的其他內容
2024/11/10
EP64 - 動畫技巧
Vue 提供了多種動畫技術來提升應用程式的互動性，包括基於 CSS 類別的動畫、基於狀態的動畫，以及使用監視器來動畫化數值。基於類別的動畫可通過動態添加 CSS 類別來觸發，像是觸發按鈕搖動效果。基於狀態的動畫則是透過樣式綁定，根據互動動態調整元素的外觀，例如根據滑鼠位置改變背景顏色。
Thumbnail
2024/11/10
EP64 - 動畫技巧
Vue 提供了多種動畫技術來提升應用程式的互動性，包括基於 CSS 類別的動畫、基於狀態的動畫，以及使用監視器來動畫化數值。基於類別的動畫可通過動態添加 CSS 類別來觸發，像是觸發按鈕搖動效果。基於狀態的動畫則是透過樣式綁定，根據互動動態調整元素的外觀，例如根據滑鼠位置改變背景顏色。
Thumbnail
2024/11/09
EP63 - Vue與Web組件
Web Components 是一組網頁原生 API，允許開發者創建可重複使用的自訂元素。Vue 與 Web Components 是互補的技術，Vue 支援整合和創建自訂元素。
Thumbnail
2024/11/09
EP63 - Vue與Web組件
Web Components 是一組網頁原生 API，允許開發者創建可重複使用的自訂元素。Vue 與 Web Components 是互補的技術，Vue 支援整合和創建自訂元素。
Thumbnail
2024/11/08
EP62 - 渲染函數與 JSX
Vue 建議使用模板構建應用程式，但在需要 JavaScript 的全程式化功能時，渲染函數可派上用場。渲染函數通過 h() 函數創建 vnode，h 是 hyperscript 的簡寫，能生成 HTML 的 JavaScript。
Thumbnail
2024/11/08
EP62 - 渲染函數與 JSX
Vue 建議使用模板構建應用程式，但在需要 JavaScript 的全程式化功能時，渲染函數可派上用場。渲染函數通過 h() 函數創建 vnode，h 是 hyperscript 的簡寫，能生成 HTML 的 JavaScript。
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
Emma 的意識界。
雙 11 你想買啥? 讓我們來清空購物車順便賺零用金吧😁蝦皮分潤計畫最佳進場時機
搬家不只添購必需品，更能透過蝦皮分潤計畫賺取零用金！本文分享近期搬家時添購的各種實用好物，包含多功能工作桌、電競椅、氣炸烤箱、收納神器等，並詳述如何透過蝦皮雙 11 活動聰明購物、善用優惠，同時利用分潤機制將敗家行為轉化為被動收入，推薦給想聰明消費又想賺額外收入的你！
#蝦皮#廚房#烤箱
Thumbnail
avatar-avatar
Emma 的意識界。
雙 11 你想買啥? 讓我們來清空購物車順便賺零用金吧😁蝦皮分潤計畫最佳進場時機
搬家不只添購必需品，更能透過蝦皮分潤計畫賺取零用金！本文分享近期搬家時添購的各種實用好物，包含多功能工作桌、電競椅、氣炸烤箱、收納神器等，並詳述如何透過蝦皮雙 11 活動聰明購物、善用優惠，同時利用分潤機制將敗家行為轉化為被動收入，推薦給想聰明消費又想賺額外收入的你！
#蝦皮#廚房#烤箱
Thumbnail
avatar-avatar
Have a nice day
{好物}蝦皮購物😺貓零食開箱🐟雙11購物攻略🌟0元免運🌟蝦皮分潤=收入🌹
貓奴每月進貢的時間又來啦! 身為專業貢品官，我從蝦皮搜尋各種零食，只為取悅家中三位貓主子！結果究竟會是龍心大悅，亦或是冷眼相待，就讓我們繼續看下去~
#方格新手#蝦皮購物#蝦皮
Thumbnail
avatar-avatar
Have a nice day
{好物}蝦皮購物😺貓零食開箱🐟雙11購物攻略🌟0元免運🌟蝦皮分潤=收入🌹
貓奴每月進貢的時間又來啦! 身為專業貢品官，我從蝦皮搜尋各種零食，只為取悅家中三位貓主子！結果究竟會是龍心大悅，亦或是冷眼相待，就讓我們繼續看下去~
#方格新手#蝦皮購物#蝦皮
Thumbnail
avatar-avatar
鱈魚的魚缸
所以我說那個型別呢？來一個有形別提示的 Vue h function 吧！(/≧▽≦)/
先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。
#Vue#Quasar#前端
Thumbnail
avatar-avatar
鱈魚的魚缸
所以我說那個型別呢？來一個有形別提示的 Vue h function 吧！(/≧▽≦)/
先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。
#Vue#Quasar#前端
Thumbnail
avatar-avatar
Cheng's
Vue 3 新世界 defineModel()，你值得更好的開發體驗
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
#Vue#開發體驗#defineModel
Thumbnail
avatar-avatar
Cheng's
Vue 3 新世界 defineModel()，你值得更好的開發體驗
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
#Vue#開發體驗#defineModel
Thumbnail
avatar-avatar
鱈魚的魚缸
Vue 元件太肥，切換頁面卡卡怎麼辦？讓 Suspense 登場吧！( ^ ω ^ )✧
切換頁面卡卡有很多種原因，這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外，還有一個方法就是利用 Vue 的 Async Component。
#Vue#前端
Thumbnail
avatar-avatar
鱈魚的魚缸
Vue 元件太肥，切換頁面卡卡怎麼辦？讓 Suspense 登場吧！( ^ ω ^ )✧
切換頁面卡卡有很多種原因，這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外，還有一個方法就是利用 Vue 的 Async Component。
#Vue#前端
Thumbnail
avatar-avatar
郭欣玫的沙龍
vue3 部屬GitHub Page
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
avatar-avatar
郭欣玫的沙龍
vue3 部屬GitHub Page
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
avatar-avatar
奧莉薇走在成為後端工程師之路上
後端框架與API 開發(三) – 樣板引擎 和視圖模板
※ 視圖模板 視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
Thumbnail
avatar-avatar
奧莉薇走在成為後端工程師之路上
後端框架與API 開發(三) – 樣板引擎 和視圖模板
※ 視圖模板 視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
Thumbnail
avatar-avatar
Youna's Devlog
[Lua] User Input & Tables表格
User Input & Tables 的使用
Thumbnail
avatar-avatar
Youna's Devlog
[Lua] User Input & Tables表格
User Input & Tables 的使用
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News