v-model修饰符

作者: 西兰花伟大炮 | 来源:发表于2017-11-18 17:40 被阅读143次

vue v-model 知识点
vue 修饰符
6.3修饰符
31.Vue v-model 修饰符
vue 修饰符详情总结
【Vue表单】v-model的修饰符
vue和jquery 混用vue没绑定数据
Vue.js 修饰符
vue表单
vue中v-model

用于控制数据同步及输入的规范

.lazy
.number
.tirm

（1）.lazy

在输入框中，v-model默认是在input事件中同步输入框中的数据，使用修饰符.lazy会转变为在输入框失焦或者按下回车后更新

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="box">
            <input type="text" v-model.lazy="foodname">
            <p>{{foodname}}</p>
        </div>
    </body>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                foodname:""
            }
        });
    </script>
</html>

image.png

（2）将输入类型转为数字 .number

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="box">
            <input type="text" v-model.number="count">
            <p>{{count}}</p>
            <button @click="whichtype">验证输入类型</button>
        </div>
    </body>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                count:255
            },
            methods:{
                whichtype:function(){
                    console.log(typeof this.count);
                }
            }
        });
    </script>
</html>