您好,登錄后才能下訂單哦!
這篇文章主要講解了“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 } }
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輸入框問題怎么解決這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。