vue的表单输入绑定—v-model指令

• 由于用户对于信息的提交需要大量的表单，所以表单控件在开发中的非常常见的
• vue中使用v-model来实现表单元素与数据的双向绑定

基本用法

    <div id="app">
        <input type="" name="" id="" value="" v-model="message"/>
        <h2>{{message}}</h2>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el:"#app",
            data:{
                message:"this is vue",
            }
        })
    </script>

在案列中：

• 因为input的v-model绑定了message，所以会实时将输入的内容传递给message，使message发生改变。
• 当message发生改变时，mustache语法会将message的值插入到DOM中。

原理

v-model其实是一个语法糖，它的本质包含两个操作

• v-bind绑定一个value属性
• v-on给当前元素绑定input事件

使用这两个操作实现表达与数据的双向绑定

    <div id="app">
    <!-- ======================================================================= -->
        <input type="text" v-model="message"/>
        <!-- 等同于 -->
        <input type="text" :value="message" @input="message = $event.target.value"/>
    <!-- ======================================================================= -->
        <h2>{{message}}</h2>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el:"#app",
            data:{
                message:"this is vue",
            }
        })
    </script>

在案列中，当用户修改输入框的内容（value）时，input事件将message修改为输入框的value，message改变，插值处的数据同步更新。

v-model与单选按钮radio

    <div id="app">
        <input type="radio" value="男" v-model="sex"/>男
        <input type="radio" value="女" v-model="sex"/>女<br>
        <h2>你的性别是：{{sex}}</h2>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el:"#app",
            data:{
                sex:"男",
            }
        })
    </script>

v-model与单选框checkbox

案列：只有勾选同意协议才能点击按钮

    <div id="app">
        <input type="checkbox" id="" value="" v-model="isAgree"/>同意协议<br>
        <button type="button" :disabled="!isAgree">下一步</button><br>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el:"#app",
            data:{
                isAgree:false,
            }
        })
    </script>

v-model与多选框checkbox

通过数组来保存多个值

    <div id="app">
        <input type="checkbox" id="" value="篮球" v-model="hobbies"/>篮球
        <input type="checkbox" id="" value="足球" v-model="hobbies"/>足球
        <input type="checkbox" id="" value="羽毛球" v-model="hobbies"/>羽毛球<br>
        <h2>你选择的是{{hobbies}}</h2>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el:"#app",
            data:{
                hobbies:[],
            }
        })
    </script>

v-model与下拉框select

    <div id="app">
        <!-- 单选 -->
        <select  v-model="fruit">
            <option value ="香蕉">香蕉</option>
            <option value ="苹果">苹果</option>
            <option value ="橘子">橘子</option>
            <option value ="西瓜">西瓜</option>
        </select>
        <h2>{{fruit}}</h2>
        
        <!-- 多选 -->
        <select  v-model="fruits" multiple="multiple">
            <option value ="香蕉">香蕉</option>
            <option value ="苹果">苹果</option>
            <option value ="橘子">橘子</option>
            <option value ="西瓜">西瓜</option>
        </select>
        <h2>{{fruits}}</h2>
    </div>
        
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        
        const test = new Vue({
            el:"#app",
            data:{
                fruit:'香蕉',
                fruits:[]
            }
        })
    </script>

表单的值绑定

值绑定就是动态的给value赋值，在真实的开发中vlue的值可能是从网络获取或在daata中定义的，所以我i们可以通过v-bind动态单独给value赋值。

    <div id="app">
        <label v-for="item in all" :for="item">
            <input type="checkbox" id="item" :value="item" v-model="hobbies"/>{{item}}
        </label>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el:"#app",
            data:{
                all:['篮球','足球','羽毛球'],
            }
        })
    </script>

v-model的修饰符

lazy修饰符

默认情况下，v-model默认是在input事件中同步输入框数据的。
lazy可以让数据失去焦点或回车时才回更新。

        <input type="" name="" id="" value="" v-model.lazy="message"/>

number修饰符

默认情况下，输入框中无论输入字母还是数字，都会被当成字符串来处理。
number可以将输入框中的内容转成数字类型。

        <input type="" name="" id="" value="" v-model.number="message"/>

trim修饰符

trim可以去除内容左右两边的空格。

        <input type="" name="" id="" value="" v-model.trim="message"/>