7.表单输入绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>表单输入绑定</title>
</head>
<body>
<!--
   表单控件的数据绑定就是用v-model指令来实现的，它会根据控件类型自动选取正确的方法来更新元素。
   由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、列表框等，v-model指令在不同的表单控件上应用
   时也会有些许差异。
   1.v-model指令会忽略所以表单元素的value、checked、selected属性的初始值，而总是将vue实例的数据属性作为
   数据来源
   2.v-model指令提供了一个trim修饰符，可以自动过滤输入数据首位的空白字符，除了trim修饰符之外还有另外两个修饰符
   .lazy(默认情况下v-model在每次input事件触发后将输入框的值和数据进行同步)，.number(如果想自动将用户的输入
   数据转为数值类型，可以给v-model添加number修饰符，这个常被用到，因为即使在type="number"时，HTML输入元素的
   值也总是返回字符串。如果这个值无法被parseFloat()解析，则会返回原始值)
   3.
-->
<div id="app">
         <!--单行文本输入框-->
    <input type="text" v-model.trim="message" value="Hello vue.js">
    <p>{{message}}</p>

       <!--多行文本输入框(默认值是放在元素中间的)-->
    <textarea v-model="message" rows="3">测试</textarea>
       <!--复选框（复选框在单独使用和多个复选框一起使用时，v-model绑定的值会有所不同，对于前者，绑定的是布尔值
       ，选中则为true，未选中则值为false;后者绑定的是同一个数组，选中的复选框的值将被保存在数组中）-->
    <br>

       <!--单个复选框(true-value、false-value可以指定选中状态下和未选中状态下v-model绑定的值是什么，当然
       我们也可以使用v-bind，将它们动态绑定到data选项中的某个数据属性上。)-->
    <input id="agreement" type="checkbox" true-value="yes" false-value="no" v-model="isAgree">
    <label for="agreement">{{isAgree}}</label>
     <p>单个复选框的值为：{{isAgree}}</p>
    <!--多个复选框-->
    <br>
    <input id="basketball" type="checkbox" value="篮球" v-model="interests">
    <label for="basketball">篮球</label>
    <input id="football" type="checkbox" value="足球" v-model="interests">
    <label for="football">足球</label>
    <input id="volleyball" type="checkbox" value="排球" v-model="interests">
    <label for="volleyball">排球</label>
    <input id="swim" type="checkbox" value="游泳" v-model="interests">
    <label for="swim">游泳</label>
    <p>你的兴趣爱好是：{{interests}}</p>
    <!--单选按钮(当单选按钮被选中时，v-model绑定的数据属性的值会被设置为该单选按钮的value值，可以使用v-bind
    将<input>元素的value属性再绑定到另一个数据属性上，这样选中后的值就是这个value属性绑定的数据属性的值)-->
    <input id="male" type="radio" :value="genderVal[0]" v-model="gender" >
    <label for="male">男</label>
    <input id="female" type="radio" :value="genderVal[1]" v-model="gender">
    <label for="female">女</label>

    <span>性别：{{gender}}</span>
    <br>

    <!--选择框(与复选框类似，因为选择框可以是单选，也可以是多选(指定<select>元素的multiple属性)，
    因此v-model在这两种情况下绑定的值会有所不同。单选时，绑定的是选项的值(<option>元素value属性的值);
    多选时，绑定到一个数组，所有选中的选项的值被保存到数组中。
    )-->
    <br>
    <select v-model="education">
        <option disabled value="">请选择你的学历</option>
        <option>高中</option>
        <option>本科</option>
        <option>硕士</option>
        <option>博士</option>
    </select>
    <p>您的学历是：{{education}}</p>
    <br>
    <!--多选选择框-->
    <select v-model="searches" multiple>
        <option v-for="option in  options" :value="option.value">
            {{option.text}}
        </option>
    </select>
    <p>您选择的搜索引擎是：{{searches}}</p>

    <!---->
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
           message:'vue无难事',
            isAgree: false,
            interests:[],
            gender:'',
            genderVal:['帅哥','美女'],
            education:'',
            searches:[],
            options:[{
               text:'百度',value:'baidu.com'
            },{
                text:'谷歌',value:'google.com'
            },{
                text:'必应',value:'bing.com'
            }]
        }
    });
</script>
</body>
</html>


实例（用户注册）：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>用户注册</title>
</head>
<body>
<!--
表单控件的输入绑定是通过v-model指令实现的，v-model指令会根据控件类型自动选取正确的方法来更新元素。
不过由于表单控件有不同的类型，v-model指令在这些控件上应用时会有些差异，而这些差异就是我们开发时需要注意的
地方了，要避免不正确的数据绑定，导致页面渲染的效果出现问题
-->
<div id="app">
<from   >
    <table border="0">
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="username" v-model="user.username">
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" name="password" v-model="user.password">
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="gender" value="1" v-model="user.gender">男
                <input type="radio" name="gender" value="0" v-model="user.gender">女
            </td>
        </tr>
        <tr>
            <td>邮件地址：</td>
            <td>
                <input type="text" name="email" v-model="user.email">
            </td>
        </tr>
        <tr>
            <td>密码问题：</td>
            <td>
                <input type="text" name="pwdQuestion" v-model="user.pwdQuestion">
            </td>
        </tr>
        <tr>
            <td>密码答案：</td>
            <td>
                <input type="text" name="pwdAnswer" v-model="user.pwdAnswer">
            </td>
        </tr>
        <tr>
            <td>
                                 <!--.prevent：提交事件不再重新加载页面 -->
                <input type="submit" value="注册" @click.prevent="register">
            </td>
            <td>
                <input type="reset" value="重填">
            </td>
        </tr>


    </table>
</from>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
          user:{
              username:'',
              password:'',
              gender: '',
              email:'',
              pwdQuestion:'',
              pwdAnswer:''
          }
        },
        methods:{
            register(){
                //直接打印this.user对象
                console.log(this.user)
            }
        }

    });
</script>
</body>
</html>