91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2023-04-26 15:16:01 來源:億速云 閱讀:293 作者:iii 欄目:開發技術

這篇文章主要講解了“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輸入框問題怎么解決這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

    向AI問一下細節

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    AI

    汕头市| 萍乡市| 石门县| 镶黄旗| 大宁县| 双辽市| 昆明市| 织金县| 龙海市| 吐鲁番市| 临颍县| 邯郸县| 绥阳县| 铜山县| 光山县| 满城县| 龙泉市| 乐都县| 融水| 常州市| 宜黄县| 同德县| 盘山县| 德安县| 福清市| 石楼县| 武功县| 博罗县| 邓州市| 如皋市| 日喀则市| 十堰市| 清流县| 基隆市| 天柱县| 宝丰县| 和龙市| 万荣县| 永城市| 岢岚县| 怀宁县|