指定vue的v-model的類型

時間 2019-12-11

標籤指定 vue model 類型简体版

原文原文鏈接

做爲一個菜鳥，兼只會依葫蘆畫瓢的搬磚it狗，並無系統學習過vue。css

在最近項目中，發現了一個奇怪的問題：html

使用vant-ui 的fieldvue

                <van-field
                        v-model="form.unitPrice" //form。unitPrice是js的number類型
                        type="number"
                        label="大貨價："
                >

當請求數據，將賦值時，this.form.unitPrice = res.unitPrice時，在NetWork中看到 res.unitPrice是float類型的，segmentfault

可是在輸入框中修改了值，在上傳後，從新請求返回的res.unitPrice變成了String類型。app

公司大神告訴我作以下修改便可：學習

v-model.number="form.unitPrice"

還不知道是啥緣由致使的，不過，這促使我找了下v-model的相關資料：ui

Vue的核心特性之一是雙向綁定，vue的響應式原理是實現了數據－>視圖，接下來咱們要學習 視圖－>數據的原理。this

v-model是一個指令，限制在<input>、<select>、<textarea>、components中使用，spa

修飾符.lazy(取代 input 監聽 change 事件)、.number(輸入字符串轉爲有效的數字)、.trim(輸入首尾空格過濾)。雙向綁定

它實際上是一個語法糖。

v-model 的實現原理

以上的原理很詳細，可是有些複雜，我沒啥耐心開。。。。

找個了一些通俗的例子：原文在這裏

HTML元素的v-model -輸入框(text)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-model指令</title>
        <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    </head>
    <body>
        <div id="app4">
            {{price}}<br>
            <input v-model="price"><!-- 右邊註釋的代碼至關於該語法糖 --><!-- <input :value="price" @input="price = $event.target.value"> -->
        </div>
        <script>
            new Vue({
                el: '#app4',
                data: {
                    price: '20'
                }
            });
        </script>
    </body>
</html>

組件的v-model - 輸入框(text)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-model指令</title>
        <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    </head>
    <body>
        <div id="app3">
            {{price}}
            <my-input v-model="price"></my-input><!-- 右邊註釋的代碼至關於該語法糖 --><!-- <my-input :value="price" @input="val => {price = val}"></my-input> -->
        </div>
        <script>
            Vue.component('my-input', {
                template: '<div><input type="text" ref="input" :value="value" @input="doThis"/></div>',
                props: {
                    value: String
                },
                methods: {
                    doThis() {
                        this.$emit('input', this.$refs.input.value);
                    }
                }
            });
            new Vue({
                el: '#app3',
                data: {
                    price: '10'
                }
            });
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。