指定vue的v-model的类型

作为一个菜鸟，兼只会依葫芦画瓢的搬砖it狗，并没有系统学习过vue。

在最近项目中，发现了一个奇怪的问题：

使用vant-ui 的field

                <van-field
                        v-model="form.unitPrice" //form。unitPrice是js的number类型
                        type="number"
                        label="大货价："
                >

当请求数据，将赋值时，this.form.unitPrice = res.unitPrice时，在NetWork中看到 res.unitPrice是float类型的，

但是在输入框中修改了值，在上传后，重新请求返回的res.unitPrice变成了String类型。

公司大神告诉我做如下修改即可：

v-model.number="form.unitPrice"

 

还不知道是啥原因导致的，不过，这促使我找了下v-model的相关资料：

Vue的核心特性之一是双向绑定，vue的响应式原理是实现了数据－>视图，接下来我们要学习 视图－>数据的原理。

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

修饰符.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>

 

posted @ 2019-05-14 23:27  WayneLiu123  阅读(4775)  评论(0)  编辑  收藏  举报