vue_ form表单 v-model

插值两种方式：{{}}，v-model

v-model

可以用 v-model 指令在只能在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
监听用户的输入事件以更新数据
<body>
    <div id="form">
        <form>
            <input v-model="message" placeholder="edit me">
            <p>
                Message is :{{ message }}
            </p>
        </form>
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var form = new Vue({
            el:'#form',
            data:{
                message:'hello world',
            }
        })
    </script>
</body>

修饰符

.lazy（懒惰，加回车键显示结果）

<body>
    <div id="form">
        <!-- 阻止表单默认的submit行为 -->
        <form @submit.prevent>  
            <!-- .lazy懒惰  加回车键 -->
            <input v-model.lazy="message" placeholder="edit me">
            <p>
                Message is :{{ message }}
            </p>
        </form>
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var form = new Vue({
            el:'#form',
            data:{
                message:'hello world',
            }
        })
    </script>
</body>

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

 只允许输入数值

<body>
    <div id="form">
        <!-- 阻止表单默认的submit行为 -->
        <form @submit.prevent>

            <input v-model.number="age" type="number">
        </form>
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var form = new Vue({
            el:'#form',
            data:{
                age:10,
            }
        })
    </script>
</body>

鼠标按钮修饰符

 

posted @ 2018-04-03 20:21  小杜要加油  阅读(780)  评论(0)    收藏  举报