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雙向綁定數(shù)據(jù)number，用戶在輸入框中內(nèi)容之后，判斷用戶輸入的內(nèi)容，然后判斷內(nèi)容是否為正整數(shù)，不是的話要進行轉(zhuǎn)換。
- 先把輸入的值轉(zhuǎn)換為整數(shù)
- 如果輸入的值是字符串或者是 <1 的數(shù)字，則將輸入框內(nèi)容賦值為1
- 如果輸入的值是帶小數(shù)的數(shù)字，則將小數(shù)點之后的值去掉，只保留整數(shù)，并將其賦值給輸入框
這樣的話，當(dāng)用戶輸入小數(shù)或者負數(shù)的時候，輸入框顯示的還是輸入的內(nèi)容，沒有轉(zhuǎn)換為我們想要的值。
但是vue中的number已經(jīng)自動賦值為我們想要的數(shù)字了。
讓輸入框自動轉(zhuǎn)換為我們想要的數(shù)值，解決方案：
在input組件中增加事件@blur="onBlur"，當(dāng)輸入框失去焦點時，把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實現(xiàn)雙向綁定的語法糖，常用于表單與組件之間的數(shù)據(jù)雙向綁定.
表單實現(xiàn)雙向綁定
1. 原理
分兩步驟
v-bind綁定一個value屬性v-on指令給當(dāng)前元素綁定input事件
可看出v-model綁定在表單上時，v-model其實就是v-bind綁定value和v-on監(jiān)聽input事件的結(jié)合體
v-model = v-bind:value + v-on:input
2. 實現(xiàn)
用v-bind:value + v-on:input來模擬實現(xiàn)v-model
<input type="text" :value="username" @input="username = $event.target.value" />
例子解釋：
通過 v-bind:value 綁定 username 變量，每次輸入內(nèi)容的時候觸發(fā)input事件
通過事件對象參數(shù) event.target.value 獲得輸入的內(nèi)容，并且把這個內(nèi)容賦值給username
此時更改username時input輸入框會變化，更改input輸入框時username變量會變，從而實現(xiàn)了v-model的雙向綁定功能
組件上的雙向綁定
1. 原理
v-model綁定在組件上的時候做了以下步驟
- 在父組件內(nèi)給子組件標(biāo)簽添加 v-model ，其實就是給子組件綁定了 value 屬性
- 子組件內(nèi)使用 prop 創(chuàng)建 創(chuàng)建 value 屬性可以拿到父組件傳遞下來的值，名字必須是 value。
- 子組件內(nèi)部更改 value 的時候，必須通過 $emit 派發(fā)一個 input 事件，并攜最新的值
- v-model 會自動監(jiān)聽 input 事件，把接收到的最新的值同步賦值到 v-model 綁定的變量上
2. 實現(xiàn)
父組件操作
<子組件標(biāo)簽 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對應(yīng)的值
? ? value: { type: String, default: '' }
? },
//2.直接用value來顯示圖片
<img :src="value" />
//3.在子組件圖片上傳成功之后，this.$emit(‘input', 新地址)， 拋給父組件，達到更新父組件中v-model綁定數(shù)據(jù)項
? ?const imageUrl = `https://${data.Location}`
? ?this.$emit('input', imageUrl)總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要以 vue-cli3 搭建的項目為例，來聊一下如何在項目中更優(yōu)雅的使用 svg 。感興趣的朋友跟隨小編一起看看吧2018-10-10
vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法示例【基于vm.$watch】
這篇文章主要介紹了vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法,結(jié)合實例形式分析了vue.js基于vm.$watch進行事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue新手指南之創(chuàng)建第一個vue-cli腳手架程序
vue-cli 是一個官方發(fā)布 vue.js 項目腳手架,使用 vue-cli 可以快速創(chuàng)建 vue 項目。這篇文章主要給大家介紹了關(guān)于Vue新手指南之創(chuàng)建第一個vue-cli程序的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要為大家詳細介紹了vue+iview實現(xiàn)文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面的幾種常用方法,vue跳轉(zhuǎn)頁面有好幾種不同方法,文中通過代碼將實現(xiàn)的方法介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue.js之$emit用法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
在Vue應(yīng)用中，有時我們需要實現(xiàn)文件預(yù)覽和打印的功能，比如，我們可能需要預(yù)覽并打印PDF文件、圖片文件等，本文將介紹如何在Vue中實現(xiàn)文件預(yù)覽和打印的功能，并提供相應(yīng)的代碼示例2023-06-06
這篇文章主要介紹了vue3-HTTP請求方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue使用echarts實現(xiàn)中國地圖和點擊省份進行查看功能
這篇文章主要介紹了vue使用echarts實現(xiàn)中國地圖和點擊省份進行查看功能,本文通過實例代碼給大家詳細講解，對vue echarts 中國地圖相關(guān)知識感興趣的朋友一起看看吧2022-12-12
vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復(fù)初始數(shù)據(jù)this.$data，this.$options.data()解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03