Vue 程式札記 : 指令 v-model

更新於 發佈於 閱讀時間約 7 分鐘

v-model 指令是 Vue 中一個非常重要的功能,它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。

什麼是 v-model 指令?

在 Vue.js 中,v-model 指令是一個用於在表單輸入和應用數據之間建立雙向綁定的指令,它可以讓你輕鬆的實現數據的雙向同步,即當輸入框的值發生變化時,綁定的數據也會同時更新,反之同樣如此。

v-model 基本用法

在最簡單的情況下,你可以將 v-model 指令綁定到一個表單輸入元素上,如以下範例:

<template>
<div>
<input v-model="message" placeholder="請輸入內容">
<p>輸入的內容是:{{ message }}</p>
</div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('');
</script>

v-model 支持的表單元素

v-model 指令支持以下類型的表單元素:

  • input
  • textarea
  • select

不同類型的表單元素在使用 v-model 時會有一些差異,下面將分別進行介紹。

文本輸入框 input[type="text"]、textarea

對於文本輸入框和多行文本框,v-model 指令的用法相同,如上面的範例所示。它們都可以通過 v-model 進行雙向綁定。

單選按鈕 input[type="radio"]

對於單選按鈕來說,當用戶選中某個單選按鈕時,v-model 綁定的變量會更新為該按鈕的 value 屬性值。換句話說,v-model 會將選中的單選按鈕的 value 屬性值賦給綁定的變量。

<template>
<div>
<input type="radio" v-model="picked" value="One" id="one">
<label for="one">One</label>
<br>
<input type="radio" v-model="picked" value="Two" id="two">
<label for="two">Two</label>
<p>選中的是:{{ picked }}</p>
</div>
</template>

<script setup>
import { ref } from 'vue';

const picked = ref('');
</script>

多選框 input[type="checkbox"]

對於多選框,v-model 的使用稍微複雜一些,v-model 應該綁定到一個數組上,數組中的元素對應於選中的多選框的 value 值。

<template>
<div>
<input type="checkbox" v-model="checkedNames" value="Jack">
<label for="jack">Jack</label>
<input type="checkbox" v-model="checkedNames" value="John">
<label for="john">John</label>
<input type="checkbox" v-model="checkedNames" value="Mike">
<label for="mike">Mike</label>
<p>選中的是:{{ checkedNames }}</p>
</div>
</template>

<script setup>
import { ref } from 'vue';

const checkedNames = ref([]);
</script>

下拉選單 select

對於下拉選單,v-model 的用法與單選按鈕類似,如果是單選下拉選單,v-model 綁定的值應該與選中的選項的 value 屬性相對應:

<template>
<div>
<select v-model="selected">
<option value="A">選項 A</option>
<option value="B">選項 B</option>
<option value="C">選項 C</option>
</select>
<p>選中的是:{{ selected }}</p>
</div>
</template>

<script setup>
import { ref } from 'vue';

const selected = ref('A');
</script>

v-model 修飾符

Vue 提供了一些修飾符來擴展 v-model 的功能,這些修飾符可以讓你更靈活地控制數據的雙向綁定。

.lazu

默認情況下,v-model 在 input 事件上同步輸入框的值與數據,使用 .lazy 修飾符後,將改為在 change 事件上進行同步,這意味著數據只會在輸入框失去焦點時更新。

<input v-model.lazy="message" >

.number

將用戶的輸入自動轉換為數字類型。如果轉換失敗,則返回原始字符串。

<input v-model.number="age" type="number">

.trim

自動過濾用戶輸入的首尾空白字符。

<input v-model.trim="message">

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
在Vue中,v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法,並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
在 Vue 3 的 Composition API 中,引入了兩個重要的響應式數據處理工具:ref 和 reactive,本文將介紹ref 和 reactive,並透過實際範例來解釋它們的用法和差異。
在 Vue 中,watch是用於進行數據監聽的,可以用來響應式的監聽資料的變化並執行相應的操作。本文介紹watch功能,並透過實際範例讓你更好的理解。
在 Vue 中,methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別,並通過實際範例來幫助你理解。
Vue 提供了兩種不同的 API 來建立和管理組件:Option API 和 Composition API。本文將介紹這兩種 API 的特點和差異,並透過實際範例來理解它們的使用方式。
Vue 的單文件組件(Single File Components,SFC)是一種特殊的文件格式,讓我們可以將Vue 組件的模板、邏輯和樣式都寫在單一個文件當中。本文將介紹 Vue SFC,幫助開發者理解和使用 Vue SFC。
在Vue中,v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法,並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
在 Vue 3 的 Composition API 中,引入了兩個重要的響應式數據處理工具:ref 和 reactive,本文將介紹ref 和 reactive,並透過實際範例來解釋它們的用法和差異。
在 Vue 中,watch是用於進行數據監聽的,可以用來響應式的監聽資料的變化並執行相應的操作。本文介紹watch功能,並透過實際範例讓你更好的理解。
在 Vue 中,methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別,並通過實際範例來幫助你理解。
Vue 提供了兩種不同的 API 來建立和管理組件:Option API 和 Composition API。本文將介紹這兩種 API 的特點和差異,並透過實際範例來理解它們的使用方式。
Vue 的單文件組件(Single File Components,SFC)是一種特殊的文件格式,讓我們可以將Vue 組件的模板、邏輯和樣式都寫在單一個文件當中。本文將介紹 Vue SFC,幫助開發者理解和使用 Vue SFC。
你可能也想看
Google News 追蹤
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
MVVM(Model View ViewModel),特點是View跟ViewModel之間做資料綁定。 Model 負責儲存應用程式的資料。 View 負責顯示資料。 ViewModel 負責處理View和Model之間的狀態關係。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
VUE為單向資料流的框架,在鄰近層級之間我們可以依靠 props 由父層向子層來傳遞需要的資料,然而遇到跨層級的架構時,雖然也是可以一層層傳進去,只是這會造成多餘的處理及凌亂的程式碼,因此才有了 "provide" 來解決我們跨層級的需求。 層級展示圖
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
MVVM(Model View ViewModel),特點是View跟ViewModel之間做資料綁定。 Model 負責儲存應用程式的資料。 View 負責顯示資料。 ViewModel 負責處理View和Model之間的狀態關係。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
VUE為單向資料流的框架,在鄰近層級之間我們可以依靠 props 由父層向子層來傳遞需要的資料,然而遇到跨層級的架構時,雖然也是可以一層層傳進去,只是這會造成多餘的處理及凌亂的程式碼,因此才有了 "provide" 來解決我們跨層級的需求。 層級展示圖
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。