vue v-model雙向綁定input輸入框

 <!-- 輸入框 -->
    <input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" />

v-model雙向綁定數(shù)據(jù)number，用戶在輸入框中內(nèi)容之后，判斷用戶輸入的內(nèi)容，然后判斷內(nèi)容是否為正整數(shù)，不是的話要進(jìn)行轉(zhuǎn)換。

• 先把輸入的值轉(zhuǎn)換為整數(shù)
• 如果輸入的值是字符串或者是 <1 的數(shù)字，則將輸入框內(nèi)容賦值為1
• 如果輸入的值是帶小數(shù)的數(shù)字，則將小數(shù)點(diǎn)之后的值去掉，只保留整數(shù)，并將其賦值給輸入框

這樣的話，當(dāng)用戶輸入小數(shù)或者負(fù)數(shù)的時(shí)候，輸入框顯示的還是輸入的內(nèi)容，沒(méi)有轉(zhuǎn)換為我們想要的值。

但是vue中的number已經(jīng)自動(dòng)賦值為我們想要的數(shù)字了。

 讓輸入框自動(dòng)轉(zhuǎn)換為我們想要的數(shù)值，解決方案：

在input組件中增加事件@blur="onBlur"，當(dāng)輸入框失去焦點(diǎn)時(shí)，把number賦值為輸入框中的值。

<!-- 輸入框 -->
    <input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" @blur="onBlur"/>
 

methods: {
    onBlur(e) {
      e.target.value = this.number
    }
}

vue v-model雙向綁定原理kalrry

v-model實(shí)現(xiàn)雙向綁定的語(yǔ)法糖，常用于表單與組件之間的數(shù)據(jù)雙向綁定.

表單實(shí)現(xiàn)雙向綁定

1. 原理

分兩步驟

• v-bind綁定一個(gè)value屬性
• v-on指令給當(dāng)前元素綁定input事件

可看出v-model綁定在表單上時(shí)，v-model其實(shí)就是v-bind綁定value和v-on監(jiān)聽(tīng)input事件的結(jié)合體

v-model = v-bind:value + v-on:input

2. 實(shí)現(xiàn)

用v-bind:value + v-on:input來(lái)模擬實(shí)現(xiàn)v-model

<input type="text" :value="username" @input="username = $event.target.value" />

例子解釋：

通過(guò) v-bind:value 綁定 username 變量，每次輸入內(nèi)容的時(shí)候觸發(fā)input事件

通過(guò)事件對(duì)象參數(shù) event.target.value 獲得輸入的內(nèi)容，并且把這個(gè)內(nèi)容賦值給username

此時(shí)更改username時(shí)input輸入框會(huì)變化，更改input輸入框時(shí)username變量會(huì)變，從而實(shí)現(xiàn)了v-model的雙向綁定功能

組件上的雙向綁定

1. 原理

v-model綁定在組件上的時(shí)候做了以下步驟

• 在父組件內(nèi)給子組件標(biāo)簽添加 v-model ，其實(shí)就是給子組件綁定了 value 屬性
• 子組件內(nèi)使用 prop 創(chuàng)建 創(chuàng)建 value 屬性可以拿到父組件傳遞下來(lái)的值，名字必須是 value。
• 子組件內(nèi)部更改 value 的時(shí)候，必須通過(guò) $emit 派發(fā)一個(gè) input 事件，并攜最新的值
• v-model 會(huì)自動(dòng)監(jiān)聽(tīng) input 事件，把接收到的最新的值同步賦值到 v-model 綁定的變量上

2. 實(shí)現(xiàn)

父組件操作

<子組件標(biāo)簽 v-model="父組件定義的變量值 />

子組件操作

<template>
?? ?<p>子組件庫(kù)存:{{ value }}</p>
?? ?<button @click="addFun">增加1</button>
</template>
<script>
?? ?export default {
?? ??? ?props:{
?? ??? ??? ?value:{
?? ??? ??? ??? ?type: Number,
?? ??? ??? ??? ?default:0
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods:{
?? ??? ??? ?addFun() {
?? ??? ??? ??? ?this.$emit('input', this.value + 1)
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>
// 這樣后每次點(diǎn)擊按鈕的時(shí)候，庫(kù)存就會(huì)加1，并且把變更后的值傳遞給父組件
// 父組件 v-model 綁定的變量就會(huì)改變

3. 實(shí)例

父組件

//v-model綁定值
<el-form-item label="員工頭像">
? ? ? ? <!-- 放置上傳圖片 -->
? ? ? ? <UploadImg v-model="userInfo.staffPhoto" />
</el-form-item>
//uploadimg: 自定義的組件， v-model：雙向綁定

子組件（圖片上傳組件）

//1.定義props value來(lái)接收父組件傳入的圖片地址
?props: {
? ? // 父組件傳遞過(guò)來(lái)的v-model對(duì)應(yīng)的值
? ? value: { type: String, default: '' }
? },
//2.直接用value來(lái)顯示圖片
<img :src="value" />
//3.在子組件圖片上傳成功之后，this.$emit(‘input', 新地址)， 拋給父組件，達(dá)到更新父組件中v-model綁定數(shù)據(jù)項(xiàng)
? ?const imageUrl = `https://${data.Location}`
? ?this.$emit('input', imageUrl)

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論