10.Vue的表单绑定

v-bind实现了数据的单向绑定，将vue实例中的数据同元素属性值进行绑定，接下来看一下vue中的数据双向绑定v-model。

10.1.v-mode实现表单绑定

<div id="app">
    <h3>注册</h3>
    <form>
        用户名：<input type="text" v-model="myForm.username"/><br>
        密码：<input type="password" v-model="myForm.password" /><br>
        确认密码：<input type="password" v-model="myForm.beginpassword" /><br>
        性别：<input type="radio" v-model="myForm.sex" value="0" />男
             <input type="radio" v-model="myForm.sex" value="1" />女<br>
        爱好：<input type="checkbox" v-model="myForm.like" value="0" />读书
             <input type="checkbox" v-model="myForm.like" value="1" />体育
             <input type="checkbox" v-model="myForm.like" value="2" />旅游<br>
        国籍：<select v-model="myForm.nationality">
                <option value="0">中国</option>
                <option value="1">美国</option>
                <option value="2">英国</option>
             </select><br>
        个人简介：<textarea v-model="myForm.brief" rows="5" cols="30"></textarea><br>
             <input type="button" value="提交" @click="handler" />
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            myForm: {
                username: '',
                password: '',
                beginpassword: '',
                sex: 0,
                like: [0, 1, 2],
                nationality: 0,
                brief: '',
                level: 0
            }
        },
        methods: {
            handler: function() {
                console.log(this.myForm.username);
                console.log(this.myForm.password);
                console.log(this.myForm.beginpassword);
                console.log(this.myForm.sex);
                console.log(this.myForm.like);
                console.log(this.myForm.nationality);
                console.log(this.myForm.brief);
            }
        }
    });
</script>

10.2.v-model修饰符

v-model中还可以使用一些修饰符来实现某些功能：

1. v-model.lazy 只有在input输入框发生一个blur时才触发，也就是延迟同步到失去焦点时。
2. v-model.trim 将用户输入的前后的空格去掉。
3. v-model.number 将用户输入的字符串转换成number。

<div id="app">
    <!-- 输入数据会延迟到失去焦点时才绑定 -->
    <input type="text" v-model.lazy="lazyStr" /><br>
    <!-- 输入数据会自动转换为number，所以可以直接进行运算 -->
    NaN<input type="text" v-model.number="numberStr" /><br>
    <!-- 输入数据会自动去除前后空格 -->
    <input type="text" v-model.trim="trimStr" /><br>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            lazyStr: '',
            numberStr:'',
            trimStr:''
        }
    });
</script>