vue中v-model雙向綁定input輸入框問題怎么解決

這篇文章主要講解了“vue中v-model雙向綁定input輸入框問題怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue中v-model雙向綁定input輸入框問題怎么解決”吧！

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

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

v-model雙向綁定數據number，用戶在輸入框中內容之后，判斷用戶輸入的內容，然后判斷內容是否為正整數，不是的話要進行轉換。

• 先把輸入的值轉換為整數

• 如果輸入的值是字符串或者是 <1 的數字，則將輸入框內容賦值為1

• 如果輸入的值是帶小數的數字，則將小數點之后的值去掉，只保留整數，并將其賦值給輸入框

這樣的話，當用戶輸入小數或者負數的時候，輸入框顯示的還是輸入的內容，沒有轉換為我們想要的值。

但是vue中的number已經自動賦值為我們想要的數字了。

 讓輸入框自動轉換為我們想要的數值，解決方案：

在input組件中增加事件@blur="onBlur"，當輸入框失去焦點時，把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實現雙向綁定的語法糖，常用于表單與組件之間的數據雙向綁定.

表單實現雙向綁定

1. 原理

分兩步驟

• v-bind綁定一個value屬性

• v-on指令給當前元素綁定input事件

可看出v-model綁定在表單上時，v-model其實就是v-bind綁定value和v-on監聽input事件的結合體

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

2. 實現

用v-bind:value + v-on:input來模擬實現v-model

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

例子解釋：

通過 v-bind:value 綁定 username 變量，每次輸入內容的時候觸發input事件

通過事件對象參數 event.target.value 獲得輸入的內容，并且把這個內容賦值給username

此時更改username時input輸入框會變化，更改input輸入框時username變量會變，從而實現了v-model的雙向綁定功能

組件上的雙向綁定

1. 原理

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

• 在父組件內給子組件標簽添加 v-model ，其實就是給子組件綁定了 value 屬性

• 子組件內使用 prop 創建 創建 value 屬性可以拿到父組件傳遞下來的值，名字必須是 value。

• 子組件內部更改 value 的時候，必須通過 $emit 派發一個 input 事件，并攜最新的值

• v-model 會自動監聽 input 事件，把接收到的最新的值同步賦值到 v-model 綁定的變量上

2. 實現

父組件操作

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

子組件操作

<template>
    <p>子組件庫存:{{ 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>
// 這樣后每次點擊按鈕的時候，庫存就會加1，并且把變更后的值傳遞給父組件
// 父組件 v-model 綁定的變量就會改變

3. 實例

父組件

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

子組件（圖片上傳組件）

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

感謝各位的閱讀，以上就是“vue中v-model雙向綁定input輸入框問題怎么解決”的內容了，經過本文的學習后，相信大家對vue中v-model雙向綁定input輸入框問題怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！