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
Hi 我是 VK~ 在 8 月底寫完〈探索 AI 時代的知識革命:NotebookLM 如何顛覆學習和創作流程?〉後,有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題,剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
如果前人已經走出一條最佳路徑,我們只顧著欣賞也會到山頂 關注點的改變 一個好的架構都會希望讓開發者能專注在”業務邏輯”的實現,可以提高專案的開發效率、減少開發者非關業務邏輯的事情而煩惱。例如: 開發者A: 請問元件的對話窗如何在確認時控制關閉或開啟狀態? 這個實際案例是架構師認為對話窗的動作
我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
Thumbnail
前言介紹 在 golang 1.16之後官方提供的工具包裡面有個 `embed` 可以使用,這使得把檔案嵌入 golang 的二進制編譯更為容易,以至於方便我們部署一些並非 .go 的副檔名檔案。 這裡要介紹的是如何把 vue 作為前端,編譯至我們的 golang 專案內,起一個網頁服務。 在開始
Thumbnail
為什麼會參加這個課程 2022年是個不一樣的年,因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。 Vue直播班的心得 前兩週其實都還跟得上,但到了第三週對我而言確實感覺有些難了啊~正在心裡徬徨第三週
父元件 傳遞變數時須加上冒號 子元件 接收props用法如下 本筆記參考: 1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2 2. https://juejin.cn/post/7
慢慢學習前端的知識,學著學著也學到框架了。現在是做UIUX,為了和前端溝通更方便才踏入這個領域,學習一點後還真的更方便了,聽他們講同步非同步或是router,大概懂在說什麼,也開始知道寫判斷式的麻煩XD 原本以為上完課就能直接轉職試試別條路,不料學習的路程不算順遂,動不動就卡關,知道的越多就越明白自
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力
Thumbnail
Hi 我是 VK~ 在 8 月底寫完〈探索 AI 時代的知識革命:NotebookLM 如何顛覆學習和創作流程?〉後,有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題,剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
如果前人已經走出一條最佳路徑,我們只顧著欣賞也會到山頂 關注點的改變 一個好的架構都會希望讓開發者能專注在”業務邏輯”的實現,可以提高專案的開發效率、減少開發者非關業務邏輯的事情而煩惱。例如: 開發者A: 請問元件的對話窗如何在確認時控制關閉或開啟狀態? 這個實際案例是架構師認為對話窗的動作
我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
Thumbnail
前言介紹 在 golang 1.16之後官方提供的工具包裡面有個 `embed` 可以使用,這使得把檔案嵌入 golang 的二進制編譯更為容易,以至於方便我們部署一些並非 .go 的副檔名檔案。 這裡要介紹的是如何把 vue 作為前端,編譯至我們的 golang 專案內,起一個網頁服務。 在開始
Thumbnail
為什麼會參加這個課程 2022年是個不一樣的年,因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。 Vue直播班的心得 前兩週其實都還跟得上,但到了第三週對我而言確實感覺有些難了啊~正在心裡徬徨第三週
父元件 傳遞變數時須加上冒號 子元件 接收props用法如下 本筆記參考: 1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2 2. https://juejin.cn/post/7
慢慢學習前端的知識,學著學著也學到框架了。現在是做UIUX,為了和前端溝通更方便才踏入這個領域,學習一點後還真的更方便了,聽他們講同步非同步或是router,大概懂在說什麼,也開始知道寫判斷式的麻煩XD 原本以為上完課就能直接轉職試試別條路,不料學習的路程不算順遂,動不動就卡關,知道的越多就越明白自
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力