vue.js表单与v-model（一）----输入框

一、input与v-model 碰撞起来的火花

input元素结合v-model指令来实现双向绑定，当输入框输入内容变化时，绑定的变量的值发生变化；同样，当绑定变量的值发生变化，视图中输入框的值也会发生变化。其一般使用情景如下：

html部分：

<div id="app">
    <input type="text"  v-model="message" />
    <div>输入框的内容是：{{message}}</div>
    <button @click="change">改变message的值</button>
</div>

js部分： 

var app = new Vue({
        el:'#app',
        data:{
            message:'测试信息'
        },
        methods:{
            change(){
                this.message =  this.message +"as";
            }
        }
});

初始： 

                 

改变输入框的值，效果如下：

改变message变量的值： 

二、火花如何而起呢

v-modle实际为语法糖，很甜很火花哦！

<input v-bind:value="message"  v-on:input="message= $event.target.value">

这里先卖个关子，具体了解还是得一步步深刻理解是如何作用的，所以我们来分解一下v-bind:value="message"  和v-on:input="message= $event.target.value"，看两者究竟如何作用？

2.1 v-on:input="message= $event.target.value"如何作用

html部分：

<div id="app">
    <input type="text"  @input="handleInput" />
    <div>{{message}}</div>
    <button @click="changeMessage">改变message变量的值</button>
</div>

js部分：

var app = new Vue({
        el:'#app',
        data:{
            message:'测试信息'
        },
        methods:{
            handleInput(e){
                this.message = e.target.value;
            },
            changeMessage(){
                this.message = this.message + '666';
            }
        }
});

初始：

     

改变输入框的值： 

   

改变message变量的值：

由上述可总结：

1、初始时，message变量的值并没有绑定到输入框上

2、输入框内容变化，可以使message变化，但是改变message的值并不会使输入框内容变化

划重点之一：v-on:input="message= $event.target.value"作用是监听输入框输入的事件，当输入框输入内容变化时，同时改变message变量的值。

2.2 v-bind:value="message"  如何作用 

<div id="app">
    <input type="text"  v-bind:value="message" />
    <div>输入框的内容是：{{message}}</div>
    <button @click="change">改变message的值</button>
</div>

var app = new Vue({
        el:'#app',
        data:{
            message:'测试信息'
        },
        methods:{
            change(){
                this.message =  this.message +"as";
            }
        }
});

 

初始：

     

改变输入框的值： 

   

改变message变量的值：

由上述可总结：

1、初始时，message变量的值绑定到了输入框上

2、输入框内容变化，message变量的值没有变化，但是改变message的值输入框内容变化

 

划重点之二：v-bind:value="message"作用是将message变量的值绑定到输入框上，所以message的初始值和改变后的值都可以在输入框上有体现。 

综合上述两点分析，我们可以理解，要想实现v-model使用在输入框中实现双向绑定，一方面要在输入框输入时更新输入框绑定的变量，也就是通过监听input事件；同样，当输入框绑定的变量发生变化时，也要使输入框视图的值同步变化，也就是使用v-bind命令。