【读书笔记】第3章 指令v-model

v-model ： 双向绑定数据， 用于表单元素： input， select， text，checkbox，radio等的表单元素。
1、实现效果：

v-model实现效果.png

2、整体代码

<div id = "example">
    <form action="">
        姓名：
        <input type="text" v-model = "person.name">
        <br>
        性别：
        <input type="radio" v-model = "person.sex"> 
        <label for="man" value = "one">男</label>
        <input type="radio" value = "two" v-model = "person.sex">
        <label for="women">女</label>
        <br>
        兴趣
        <input type="checkbox" value = "book" v-model = "person.interest">
        <label for="book">阅读</label>

        <input type="checkbox" value = "swim" v-model = "person.interest">
        <label for="swim">游泳</label>

        <input type="checkbox" value = "game" v-model = "person.interest">
        <label for="game">游戏</label>

        <input type="checkbox" value = "sing" v-model = "person.interest">
        <label for="sing">唱歌</label>
        <br>

        身份： 
        <select name="" id="" v-model = "person.identify">
            <option value="teacher">教師</option>
            <option value="doctor">醫生</option>
            <option value="lawyer">律師</option>
        </select>
    </form>
</div>
<script>
    new Vue({
        el : "#example",
        data : {
            person : {
                name : "Christine",
                sex : "two",
                interest : ["book", "sing", "game"],
                identify : "lawyer"
            }
        }
    })
</script>

3、v-model 指令后面， 可以添加多个参数（number， lazy，debounce）。
number： 将用户输入的自动转为Number类型， （如果原值的转化结果为NaN， 则返回原值）
lazy： 在change时间中去同步。
debounce : 防止进行高耗操作， 就是防止input 框改变数据后，立马传到后台， 当input 框里的内容确定之后呢， 在传， 所以加了一个小小的延时。
实现效果：

<div id = "example">
    <input type="text" v-model = "isNumber" number>
    {{isNumber}}
    <br>
    <input type="text" v-model = "msg" lazy>
     {{msg}}
    <br>
    <input type="text" v-model = "msg2" debounce = "3000">
     {{msg2}}
</div>

<script>
    var exampleVM2 = new Vue({
        el : "#example",
        data : {
            isNumber : "",
            msg : "内容在change事件后才改变的",
            msg2 : "內容在1000mm后才改變"
        }
    })
</script>

/********************************************************************************
**********************欢迎各位码农， 小伙伴来指正************************
*********** 本姑凉微信公众号是，“前端进益” 欢迎来围观****************
********************************************************************************/