VUE 入门 表单的输入绑定

VUE 入门 表单的输入绑定

概述
用v-model指令在表单、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。

首先安装依赖，这里直接从cdn导入

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>

这里我们通过HTML代码创建好表单
html代码：

 <div class="container">
     <div id="app">
         <!-- 创建表单 -->
       <form> 
         <!-- 单行文本 -->
         <div>用户名：
             <input type="text" v-model='form.user'>
         </div>
         <!-- 多行文本 -->
         <div>个人简介:
             <textarea v-model='form.desc' cols='21' rows="8"></textarea>
         </div>
         <!-- 单选框 -->
         <div>性别：
                 <!-- 在html中可以使用name进行分组，在vue中可以直接通过v-model进行分组 -->
             <input type="radio" v-model='form.gender' value='男'>男
             <input type="radio" v-model='form.gender' value='女'>女
         </div>
         <!-- 复选框 -->
         <div>爱好：
             <input type="checkbox" v-model='form.hobby' value="唱歌">唱歌
             <input type="checkbox" v-model='form.hobby' value="跳舞">跳舞
             <input type="checkbox" v-model='form.hobby' value="游戏">游戏
         </div>
         <!-- 下拉框 -->
         <div>地区：
             <select v-model='form.address' >
                 <option value=''>请选择</option>
                 <option value='上海'>上海</option>
                 <option value='深圳'>深圳</option>
                 <option value='北京'>北京</option>
                 <option value='乌鲁木齐'>乌鲁木齐</option>
             </select>
         </div>
         <button @click="sub">提交</button>
       </form>
     </div>
     </div>

用css样式进行修饰

 .container{
            height: 580px;
            width: 100%;
            background-color: darksalmon;
           
        }
         #app{
             height: 400px;
             width: 300px;
             position: absolute;
             right:10%;
             top:10%;
             background-color:#fff;
         }
      
         #app div{
             margin-top: 20px;
             margin-left: 10px;
         }
        button{
            margin-top: 30px;
            position: absolute;
            left: 120px;
        }

再然后进入Vue代码的编写，vue创建实例

 new Vue({
                el:'#app',
                data:{
                    form:{
                        user:'',
                        desc:'',
                        gender:'',
                        hobby:[],
                        address:''
                    }
                },
                 methods:{
                     sub(){
                         alert('hello'+this.form.user+'\n'+
                               "您的个人简介是："+this.form.desc+'\n'+
                               "您的性别是"+this.form.gender+'\n'+
                               "您的爱好是"+this.form.hobby+'\n'+
                               "您来自"+this.form.address)
                     }
                 }
              
            })