【vue-5】Vue 3 中的 v-model:雙向數據綁定的全面指南

在 Vue 開發中,v-model 是實現表單輸入和應用狀態之間雙向綁定的關鍵指令。Vue 3 對 v-model 進行了重大改進,使其更加靈活和強大。本文將深入探討 Vue 3 中 v-model 的工作原理、新特性以及最佳實踐。

1. v-model 基礎

1.1 什么是 v-model

v-model 是 Vue 提供的一個語法糖,它本質上結合了 v-bindv-on

<input v-model="message">

等價于:

<input :value="message"@input="message = $event.target.value"
>

1.2 基本用法

在表單元素上使用 v-model 非常簡單:

<template><input v-model="text" placeholder="請輸入"><p>你輸入的內容是: {{ text }}</p>
</template><script setup>
import { ref } from 'vue'const text = ref('')
</script>

2. Vue 3 中的 v-model 改進

2.1 多個 v-model 綁定

Vue 3 允許在單個組件上使用多個 v-model

<UserNamev-model:first-name="firstName"v-model:last-name="lastName"
/>

子組件實現:

<script setup>
defineProps({firstName: String,lastName: String
})defineEmits(['update:firstName', 'update:lastName'])
</script><template><input:value="firstName"@input="$emit('update:firstName', $event.target.value)"/><input:value="lastName"@input="$emit('update:lastName', $event.target.value)"/>
</template>

2.2 v-model 修飾符

Vue 3 支持自定義 v-model 修飾符。例如,創建一個 capitalize 修飾符:

<MyComponent v-model.capitalize="myText" />

子組件處理:

<script setup>
const props = defineProps({modelValue: String,modelModifiers: { default: () => ({}) }
})const emit = defineEmits(['update:modelValue'])function emitValue(e) {let value = e.target.valueif (props.modelModifiers.capitalize) {value = value.charAt(0).toUpperCase() + value.slice(1)}emit('update:modelValue', value)
}
</script><template><input :value="modelValue" @input="emitValue" />
</template>

3. 不同表單元素的使用

3.1 文本輸入

<input v-model="text" type="text">

3.2 多行文本

<textarea v-model="message"></textarea>

3.3 復選框

單個復選框綁定到布爾值:

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

多個復選框綁定到數組:

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

3.4 單選按鈕

<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">

3.5 選擇框

單選:

<select v-model="selected"><option disabled value="">請選擇</option><option>A</option><option>B</option><option>C</option>
</select>

多選(綁定到數組):

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

4. v-model 修飾符

Vue 提供了一些內置修飾符來修改 v-model 的行為:

4.1 .lazy

input 事件改為 change 事件:

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

4.2 .number

自動將用戶輸入轉為數字:

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

4.3 .trim

自動去除用戶輸入的首尾空白:

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

5. 在組件中使用 v-model

5.1 基本實現

子組件:

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script><template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/>
</template>

父組件:

<CustomInput v-model="searchText" />

5.2 帶參數的 v-model

子組件:

<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script><template><inputtype="text":value="title"@input="$emit('update:title', $event.target.value)"/>
</template>

父組件:

<MyComponent v-model:title="bookTitle" />

6. 高級技巧

6.1 自定義輸入組件

創建一個帶驗證的輸入組件:

<!-- ValidatedInput.vue -->
<script setup>
import { computed } from 'vue'const props = defineProps({modelValue: String,required: Boolean,minLength: Number
})const emit = defineEmits(['update:modelValue'])const error = computed(() => {if (props.required && !props.modelValue) {return '此字段為必填項'}if (props.minLength && props.modelValue?.length < props.minLength) {return `至少需要 ${props.minLength} 個字符`}return null
})function handleInput(e) {emit('update:modelValue', e.target.value)
}
</script><template><input :value="modelValue" @input="handleInput" /><div v-if="error" class="error">{{ error }}</div>
</template>

使用:

<ValidatedInput v-model="username" :required="true" :minLength="5"
/>

6.2 組合式 API 中的 v-model

使用 computed 實現更復雜的邏輯:

<script setup>
import { computed } from 'vue'const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])const value = computed({get() {return props.modelValue},set(value) {emit('update:modelValue', value)}
})
</script>

7. 性能考慮

  1. 避免大型表單的深度響應式:對于大型表單,考慮使用淺響應式或手動管理狀態
  2. 防抖處理:頻繁的輸入可以使用防抖優化性能
  3. 虛擬滾動:對于大量選項的選擇框,考慮使用虛擬滾動

8. 常見問題解答

Q: v-model 和 sync 修飾符有什么區別?

A: 在 Vue 2 中,.sync 修飾符用于雙向綁定,Vue 3 中已統一使用帶參數的 v-model

Q: 為什么我的 v-model 在自定義組件上不工作?

A: 確保子組件正確接收 modelValue prop 并發出 update:modelValue 事件。

Q: 如何處理 v-model 的初始值?

A: 確保父組件為 v-model 綁定的數據提供初始值。

9. 總結

Vue 3 的 v-model 提供了更靈活、更強大的雙向數據綁定能力。通過理解其工作原理和各種使用場景,開發者可以構建更復雜、更高效的表單交互。關鍵點包括:

  1. v-model:value@input 的語法糖
  2. Vue 3 支持多個 v-model 綁定
  3. 可以創建自定義修飾符
  4. 在組件中使用需要正確實現 prop 和 emit

掌握這些概念將大大提升你在 Vue 開發中的效率和代碼質量。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/89717.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/89717.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/89717.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

結合自身,制定一套明確的 Web3 學習路線和技術棧建議

目錄 ? 一、結合自身&#xff0c;明確方向和目的 ? 二、技術路線和建議 &#x1f9ed; 技術路線圖&#xff08;按階段劃分&#xff09; 第一階段&#xff1a;鞏固 Web3 基礎&#xff08;1-2 周&#xff09; 第二階段&#xff1a;NFT 平臺開發實戰&#xff08;4-6 周&…

SPARKLE:深度剖析強化學習如何提升語言模型推理能力

摘要&#xff1a;強化學習&#xff08;Reinforcement Learning&#xff0c;RL&#xff09;已經成為賦予語言模型高級推理能力的主導范式。盡管基于 RL 的訓練方法&#xff08;例如 GRPO&#xff09;已經展示了顯著的經驗性收益&#xff0c;但對其優勢的細致理解仍然不足。為了填…

【Linux服務器】-MySQL數據庫參數調優

一、基礎配置 [mysqld] # 聲明以下配置屬于MySQL服務器&#xff08;mysqld&#xff09;[mysqld]&#xff1a;配置文件的模塊標識&#xff0c;表示這是 MySQL 服務器的配置段。 二、路徑與基礎設置 datadir/var/lib/mysql socket/var/lib/mysql/mysql.sock pid-file/var/run/mys…

sqli-labs靶場通關筆記:第32-33關 寬字節注入

第32關 寬字節注入查看一下本關的源代碼&#xff1a;function check_addslashes($string) // 定義一個用于過濾特殊字符的函數&#xff0c;目的是轉義可能用于注入的特殊符號 {$string preg_replace(/. preg_quote(\\) ./, "\\\\\\", $string); // 轉義…

基于Eureka和restTemple的負載均衡

在微服務架構中&#xff0c;基于 Eureka&#xff08;服務注冊中心&#xff09;和 RestTemplate&#xff08;HTTP 客戶端&#xff09;實現負載均衡是常見的方案&#xff0c;核心是通過 Eureka 獲取服務實例列表&#xff0c;再結合負載均衡策略選擇具體服務實例進行調用。以下是詳…

子線程不能直接 new Handler(),而主線程可以

在 Android 中&#xff0c;子線程不能直接 new Handler()&#xff0c;而主線程可以&#xff0c;原因在于 Looper 機制。下面詳細解釋&#xff1a;1. 為什么主線程可以直接 new Handler()&#xff1f; 主線程&#xff08;UI 線程&#xff09;在啟動時&#xff0c;系統會自動調用…

Android無需授權直接訪問Android/data目錄漏洞

從android11開始&#xff0c;訪問/sdcard/Android/data目錄需要URI授權&#xff0c;而從更高的版本開始甚至URI權限也被收回&#xff0c;返回“無法使用此文件夾”的提示&#xff0c;這里提供一種方法&#xff0c;可以越權強制訪問data目錄&#xff0c;當然也包括obb、media等目…

本地部署 Kimi K2 全指南(llama.cpp、vLLM、Docker 三法)

Kimi K2 是 Moonshot AI 于2025年7月11日發布的高性能多專家語言模型&#xff08;MoE&#xff09;&#xff0c;支持最大 128K 上下文&#xff0c;激活參數規模為 32B&#xff0c;具備極強的推理、代碼生成與多輪對話能力。自從其權重以多種格式開源以來&#xff0c;許多開發者希…

使用python的pillow模塊將圖片轉化為灰度圖和相關的操作

使用python的pillow模塊可以將圖片轉化為灰度圖&#xff0c; 可以獲取灰度圖的特定點值&#xff0c;區域值&#xff0c; 修改值并保存到圖片 圖片轉換為灰度圖 from PIL import Image# 打開圖片 image Image.open("d://python//2//1.jpg")gray_image image.convert…

【網絡安全】大型語言模型(LLMs)及其應用的紅隊演練指南

未經許可,不得轉載。 文章目錄 什么是紅隊演練? 為什么 RAI 紅隊演練是一項重要實踐? 如何開展和規劃 LLM 的紅隊演練 1.測試前的準備 規劃:由誰負責測試 規劃:測試內容 規劃:測試方式 規劃:數據記錄方式 2.測試過程中 3.每輪測試后 報告數據 區分“識別”與“測量” 本…

ROS2安裝ros-humble-usb-cam 404錯誤導致失敗的解決方法

ROS2安裝ros-humble-usb-cam遇到404錯誤導致安裝失敗&#xff0c;如圖&#xff1a;解決方法&#xff1a; 備份 sources.list sudo cp /etc/apt/sources.list.d/ros2.list /etc/apt/sources.list.d/ros2.list.bak替換為清華源 sudo sed -i s|http://packages.ros.org/ros2/ubunt…

OllyDbg技巧學習

1 嘗試在反匯編代碼中找到一個函數的二進制代碼 有的時候需要一個函數的二進制代碼&#xff0c;注入到另外的一些地方&#xff1b;以此程序為示例&#xff0c; 八叉樹的C實現與原理解析-CSDN博客 Ollydbg打開可執行文件&#xff0c;我想先找到此函數的二進制代碼體&#xff0…

數據分析智能體:讓AI成為你的數據科學家

數據分析智能體&#xff1a;讓AI成為你的數據科學家 &#x1f31f; 嗨&#xff0c;我是IRpickstars&#xff01; &#x1f30c; 總有一行代碼&#xff0c;能點亮萬千星辰。 &#x1f50d; 在技術的宇宙中&#xff0c;我愿做永不停歇的探索者。 ? 用代碼丈量世界&#xff0c…

K8s與Helm實戰:從入門到精通

Kubernetes 簡介 Kubernetes(簡稱 K8s)是一個開源的容器編排平臺,用于自動化部署、擴展和管理容器化應用。最初由 Google 設計并捐贈給云原生計算基金會(CNCF),現已成為容器編排領域的事實標準。 核心功能 自動化容器部署:支持聲明式配置和自動化部署,減少人工干預。…

根據ARM手冊,分析ARM架構中,原子操作的軟硬件實現的底層原理

目錄 1.問題背景&#xff1a; 2.原子操作 2.1 硬件操作 2.1.1 LDREX/LDXR指令 2.1.2 STREX/STXR指令 2.2 軟件操作 2.3 軟件硬件操作的各性能對比 3.總結 1.問題背景&#xff1a; 我們知道&#xff0c;RTOS的任務調度算法是搶占式優先級調度算法。 既然是搶占了&…

iOS 抓包工具選擇與配置指南 從零基礎到高效調試的完整流程

iOS 抓包&#xff1a;復雜網絡調試的必要技能 隨著移動端應用越來越依賴網絡交互&#xff0c;iOS 抓包作為核心調試工具之一&#xff0c;變得尤為重要。無論是調試 App 與后端的接口通信、排查 HTTPS 請求加密問題&#xff0c;還是定位網絡連接超時、請求異常&#xff0c;抓包都…

Java使用FastExcel實現Excel文件導入

依賴配置 (Maven pom.xml)<dependencies><!-- FastExcel 核心庫 --><dependency><groupId>cn.idev.excel</groupId><artifactId>fastexcel</artifactId><version>1.0.0</version></dependency><!-- Apache POI…

【60】MFC入門到精通——運行后 button按鍵上不顯示 按鍵名, 控件上的文字不顯示

文章目錄運行后&#xff0c;button按鍵上不顯示 “Test”原因是屬性&#xff0c;圖標–>True&#xff0c;改為False就好了。

抖音回應:沒有自建外賣,就是在團購的基礎上增加的配送功能

今年以來&#xff0c;外賣行業競爭愈加激烈&#xff0c;市場格局風云變幻。在這一背景下&#xff0c;外賣行業動向備受關注。近日&#xff0c;針對抖音上線團購版外賣的消息引發公眾關注。為此&#xff0c;大公科技以商家身份咨詢了抖店客服&#xff0c;對方回應稱&#xff0c;…

中間件安全攻防全解:從Tomcat到Weblogic反序列化漏洞介紹

本文僅用于技術研究&#xff0c;禁止用于非法用途。 Author:枷鎖 文章目錄什么是中間件中間件漏洞(1) Tomcat(2) Weblogic(3) JBoss漏洞什么是中間件 中間件&#xff08;Middleware&#xff09;是指一種軟件組件&#xff0c;其作用是在不同的系統、應用程序或服務之間傳遞數據…