Vue中v-model的使用和指令修饰符

一、V-model在不同的表单元素上是如何使用

1.文本框绑定v-model

  
姓名：

2.多行文本框绑定v-model

注意：标签中不要写差值表达式/属性

    地址：{{address}}

3.单选框绑定v-model

v-model绑定同一个属性，
绑定相同属性name，可以只选择一个，不能同时选择。

    男
    女
    {{sex}}

4.复选框

①绑定单个复选框,绑定一个boolean值

   是否同意：{{isOk}}

②绑定多个复选项，绑定同一个数组

    爱好：
    抽烟
    喝酒
    打拳
    烫头
    {{hobbies}}

5.下拉选择框

①单选时绑定一个属性

    城市：
    
        上海
        北京
        南京
        澳门
        香港
    
    {{citys}}

②多选时绑定一个数组,需要添加multiple,按住ctrl+鼠标点击可多选

    喜欢的食物：
    
        苹果
        橙子
        草莓
        咖啡
        葡萄
        蛋糕
    
    {{foods}}

二、V-model的指令修饰符

v-model指令默认触发的是input事件，当文本框的值发生变化后，离开同步给数据

1.添加了.lazy修饰符，可以将input事件转为change事件

当input框失去焦点时触发同步数据

    姓名：{{name}}

2.添加.trim修饰符，可以去除内容两端空格

     姓名：开始{{name}}结束

3.添加.number修饰符，可以将是数字的字符串，转为Numer类型

    年龄：{{age+20}}