vue3表單輸入綁定方式
初識表單輸入綁定
vue3可以幫助我們將vue定義的變量綁定到html表單元素上，并且監(jiān)聽到html表單元素修改值時，會將對應(yīng)的vue定義的變量修改。
<!-- 將vue3定義的text綁定給inut元素, 當(dāng)input元素發(fā)生input輸入事件時, 將修改vue3定義的text --> <input :value="text" @input="event => text = event.target.value">
v-model 指令幫我們簡化了這一步驟（與上面完全一樣的效果）：
<input v-model="text">
v-model 還可以用于各種不同類型的輸入
- 文本類型的 <input> 和 <textarea> 元素會綁定 value property 并偵聽 input 事件；
- <input type=“checkbox”> 和 <input type=“radio”> 會綁定 checked property 并偵聽 change 事件；
- <select> 會綁定 value property 并偵聽 change 事件。
注意：v-model 會忽略任何表單元素上初始的 value、checked 或 selected attribute。它將始終將當(dāng)前綁定的 JavaScript 狀態(tài)視為數(shù)據(jù)的正確來源。
這些html原生的表單元素 和 v-model之間 實現(xiàn)了，把vue定義的響應(yīng)式變量綁定給了表單元素的值，同時，通過監(jiān)聽對應(yīng)表單的對應(yīng)事件（為了監(jiān)測到修改的值），獲取到修改后的值，把值更新到vue定義的響應(yīng)式變量中，這樣就實現(xiàn)了雙向綁定。自定義組件如果要支持v-model，那么也需要這樣去做這2部分
基本用法
input
<div class="main-box">
<p>Message is: {{ msg }}</p>
<input v-model="msg" placeholder="edit me" />
</div>
<script setup>
import { ref,reactive } from 'vue'
let msg = ref('a')
</script>textarea
注意：要加上下面的樣式，才有換行效果哦
<div class="main-box">
<p style="white-space: pre-line;">{{ msg }}</p>
<textarea v-model="msg"></textarea>
</div>
<script setup>
import { ref,reactive } from 'vue'
let msg = ref('a')
</script>checkbox
單個復(fù)選框
單個的復(fù)選框，綁定的是布爾類型值
<div class="main-box">
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
</div>
<script setup>
import { ref,reactive } from 'vue'
let checked = ref(true)
</script>多個復(fù)選框
多個復(fù)選框綁定的是同一個數(shù)組或集合的值
<div class="main-box">
<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>
</div>
<script setup>
import { ref,reactive } from 'vue'
let checkedNames = ref(['Mike'])
</script>radio
<div class="main-box">
<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>
</div>
<script setup>
import { ref,reactive } from 'vue'
let picked = ref('Two')
</script>select
單選
option中里面沒有value值，但還是默認(rèn)選擇了B
<div class="main-box">
<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>
</div>
<script setup>
import { ref,reactive } from 'vue'
let selected = ref('B')
</script>多選
<div class="main-box">
<div>Selected: {{ selected }}</div>
<select v-model="selected" multiple>
<option v-for="option in options"
:value="option.value"
:key="option.value">
{{ option.text }}
</option>
</select>
</div>
<script setup>
import { ref, reactive } from 'vue'
let selected = ref('A')
let options = ref([
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
])
</script>值綁定
通過以上基本用法，我們發(fā)現(xiàn)：對于單選按鈕，復(fù)選框和選擇器選項，v-model 綁定的值通常是靜態(tài)的字符串 (或者對復(fù)選框是布爾值)，但有的時候，我們希望表單元素綁定的值是組件實例上的動態(tài)數(shù)據(jù)。
這可以通過使用 v-bind 來實現(xiàn)。
此外，使用 v-bind 還使我們可以將選項值綁定為非字符串的數(shù)據(jù)類型。
復(fù)選框
單個復(fù)選框默認(rèn)綁定的是布爾值，可以通過vue特有的 attributes，來綁定值。
甚至可以使用v-bind綁定組件實例身上的動態(tài)的值
<div class="main-box">
<input type="checkbox"
v-model="toggle"
true-value="yes"
:false-value="no" />
{{toggle}}
</div>
<script setup>
import { ref, reactive } from 'vue'
let no = ref('nonono~')
</script>單選框
<div class="main-box">
<p>{{ pick }}</p>
<input type="radio" v-model="pick" :value="first" />1
<input type="radio" v-model="pick" :value="second" />2
</div>
<script setup>
import { ref, reactive } from 'vue'
let first = ref('第一')
let second = ref('第二')
let pick = ref('')
</script>選擇器
<div class="main-box">
<p>{{ selected }}</p>
<select v-model="selected">
<!-- 綁定 內(nèi)聯(lián)對象字面量 -->
<option :value="{ number: 123 }">123</option>
</select>
</div>
<script setup>
import { ref, reactive } from 'vue'
let selected = ref()
</script>修飾符
.lazy
當(dāng)輸入完，并且input焦點時，即觸發(fā)了change事件，然后msg才會修改。
而不是原來的：邊輸入，它會實時的邊改
<div class="main-box">
<p>{{ msg }}</p>
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />
</div>
<script setup>
import { ref, reactive } from 'vue'
let msg = ref()
</script>.number
如果你想讓用戶輸入自動轉(zhuǎn)換為數(shù)字，可以在 v-model 后添加
.number 修飾符來管理輸入number 修飾符會在輸入框有 type=“number” 時自動啟用
<div class="main-box">
<input v-model.number="age" />
</div>
<script setup>
import { ref, reactive } from 'vue'
let age = ref()
</script>.trim
如果想要默認(rèn)自動去除用戶輸入內(nèi)容中兩端的空格，可以在 v-model 后添加 .trim 修飾符
<div class="main-box">
<input v-model.trim="msg" />
</div>
<script setup>
import { ref, reactive } from 'vue'
let msg= ref()
</script>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了VUE3項目VITE打包優(yōu)化的實現(xiàn),包括使用視圖分析工具、路由懶加載、第三方庫CDN引入、gzip壓縮、按需引入第三方庫、TreeShaking、剔除console和debugger、分包策略和圖片壓縮等,具有一定的參考價值,感興趣的可以了解一下2025-03-03
一篇文章帶你使用Typescript封裝一個Vue組件(簡單易懂)
這篇文章主要介紹了使用Typescript封裝一個Vue組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue數(shù)據(jù)增刪改查與表單驗證的實現(xiàn)流程介紹
這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗證的實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-10-10
這篇文章主要介紹了vue獲取dom元素注意事項及vue獲取dom元素的內(nèi)容,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue框架下部署上線后刷新報404問題解決方案,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
Vue 前端實現(xiàn)登陸攔截及axios 攔截器的使用
這篇文章主要介紹了Vue 前端實現(xiàn)登陸攔截及axios 攔截器的使用,通過這個項目學(xué)習(xí)如何實現(xiàn)一個前端項目中所需要的 登錄及攔截、登出、token失效的攔截及對應(yīng) axios 攔截器的使用。需要的朋友可以參考下2019-07-07
這篇文章主要介紹了VUE.CLI4.0配置多頁面入口的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧2023-08-08
打包組件報錯:Error:Cannot?find?module?'vue/compiler-sfc&ap
最近遇到這樣的問題,vue組件庫搭建過程中使用webpack打包組件時報錯,本文給大家分享打包組件報錯:Error:?Cannot?find?module?‘vue/compiler-sfc‘的解決方法,感興趣的朋友一起看看吧2023-12-12
在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下2024-06-06