VUE2 表单

<form> - <input> - <label> - v-model

<form @submit="confirm">
    <label for="account">账号：</label>   <!-- 用来获取焦点 ，点击“账号：”后可以选中input框，它里面的for对应下面的id -->
    <input type="text" id="account" v-model.trim="userInfo.account"> <br />  <!-- 这里v-model收集的是input中输入的value值 , trim表示去掉输入框中前后的空格-->
    <label for="password">账号：</label>
    <input type="password" id="password" v-model="userInfo.password" @keyup.enter="test"> <br />    

    <label for="age">年龄：</label>
    <input type="number" id="age" v-model.number="userInfo.age"> <br />  <!-- type="number"控制的是输入框输入的类型，v-model.number控制的是收集到的值的类型 -->    
    <button>提交</button>
</form>

data(){
    return{
        userInfo:{        //这里绑定的是v-model
            account: '',
            password: '',
            age: ''
        }
    }
},
methods:{
    confirm(){
        console.log(JSON.stringify(this.userInfo))   //转化成json格式
    },
    test(e){
        console.log(e.target.value)                  //获取输入框的值
    }
}

iuput框中获取value的另外一种方式，

<input type="text" ref="uerInfo" />
<script>
methods: {
    getInfo(){
        this.$refs.userInfo.value
    }
}
</script>

<input> - radio

<form>
    男<input type="radio" name="sex" value="male" v-model="sex">  <!-- 这里的name相同就可以将这两个单选框绑定在一起了， -->
    女<input type="radio" name="sex" value="female" v-model="sex">
</form>

data(){
    return{
        sex: 'male',   //这里绑定的是v-mode,默认是“male”上面默认就会勾选“男”这个单选框
    }
}

<input> - checkbox

第一种用法：

<form>
    爱好：
    学习   <input type="checkbox" value="study" v-model="hobby" :checked="toCheck">
    打游戏 <input type="checkbox" value="game" v-model="hobby" :checked="toCheck" >
    吃饭   <input type="checkbox" value="eat" v-model="hobby" :checked="toCheck" >
</form>

data(){
    return{
        hobby: [],   //checkbox如果是多组的，一定要要初始化为数组类型！！！
        toCheck: true
    }
}

第二种用法：

<input type="checkbox" v-model="agree">

data(){
    return{
        agree: '',   //checkbox如果是单个使用时，这里正常写个字符串类型就行，它收集的是boolen类型
    }
}

<select> - <option>

<select v-model="city">
   <option value="">请选择地区</option>
   <option value="beijing">北京</option>
   <option value="shanghai">上海</option>
   <option value="shenzhen">深圳</option>
</select>

data(){
    return{
        city: '',  //如果需要有默认地址，那么给这个city赋个初始值就行
    }
}

<textarea>

<textarea v-model.lazy="content"></textarea>  <!-- v-model.lazy加上lazy后，文本框失去焦点后v-model才收集数据 -->

data(){
    return{
        content: '',
    }
}