vue-基本操作-收集表单元素绑定的数据用vue中的v-model收集表单里面的数据，不同的表单元素配合v-model会

用vue中的v-model收集表单里面的数据，不同的表单元素配合v-model会有不同的写法和技巧

本次的表单元素包括：文本框，单选，多选，下拉框，文本域

1 编写表单元素

首先编写表单元素，包括：文本框，单选，多选，下拉框，文本域

input输入框细节

这里有一个细节(小技巧)：表单编写input输入框的时候，通常会配合label标签使用并加上相关的css或或者js，这样会让界面更加美观，用户体验更好，但是今天主要讲的是v-model获取不同的元素数据，就不在代码里面增加复杂的代码了，大家知道就好，我在下面简单演示下加不加的区别

不加上lable

页面的交互性很差，必须自己点击输入框才能获取到光标

加上lable

查看页面，点击账号会跳进对应的输入框并获取光标

继续编写表单元素

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <form>
            账号:<input type="text"><br/><br/>
            密码:<input type="password"><br/><br/>
            性别：
            男<input type="radio" name="sex">
            女<input type="radio" name="sex"><br/><br/>
            爱好：
            学习 <input type="checkbox"  name="">
            打游戏 <input type="checkbox"  name="">
            吃饭 <input type="checkbox"  name=""><br/><br/>
            所属校区
                <select>
                    <option value="">请选择校区</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="shenzhen">深圳</option>
                    <option value="wuhan">武汉</option>
                </select><br/><br/>
             其他信息
                <textarea></textarea><br/><br/>   
            <input type="checkbox"> 阅读并接受<a href="#">《用户协议》</a>
            <button>提交</button>
        </form>
       
    </div>
</body>

<script type="text/javascript">
     const vm=  new Vue({
        el:'#root',
        data:{
           
        }
        
  
    })
</script>

</html>