表单输入绑定&事件修饰符

1.v-model:操作表单双向数据绑定
输入框

姓名：

单选框:每个单选框指定相同的属性，即name="sex"

 性别：
            男
            女

复选框
（1）单个复选框绑定一个布尔值
（2）多个复选框绑定一个数组

打游戏
            敲代码
            睡觉
            看电影

选择框
单选时，绑定一个属性

 地区：
            
                
                北京
                上海
                深圳
                天津
            
            {{address}}

多选时，绑定一个数组

地区：
            
                北京
                上海
                深圳
                天津
            
            {{addresses}}

相关修饰符
lazy修饰符在文本框失去光标后，再更新数据

            姓名：{{name}}

number修饰符在文本框输入数值转为数值类型

            年龄：{{age}}

trim修饰符去除输入首尾空格

            长度：文本长度：{{txt.length}}

data数据

  new Vue({
            el: "#app",
            data() {
                return {
                    msg: '',
                    isAgree: true,
                    hobbies: [],
                    sex: '女',
                    address: '',
                    addresses: [],
                    name: '',
                    age: 0,
                    txt: ''
                }
            }
        })

（2）事件修饰符
.prevent,用于阻止默认行为
.stop,用于阻止事件冒泡
.once,用于绑定一次事件方法
.self,只能在自身元素上触发，不能再子元素触发
使用方法：