【vue】v-model与单选radio、checkbox、多选checkbox、select结合使用、以及三种修饰符展示

radio 单选框

代码

<div id="app">
<label for="male">
       <!--name属性相同的input标签即为一组,单选框实现互斥效果（或者v-model绑定同一个变量{{}}），
                只有设置了name属性的表单元素才能在提交表单时传递它们的值。-->
            <input type="radio" name="sex" id="male" value="男" v-model="sex">男
        </label>
        <lebel for="female">
            <input type="radio" name="sex" id="female" value="女" v-model="sex">女
        </lebel>
        <h2>你选择的性别为：{{sex}}</h2>
</div>
<script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'hello',
                sex:'男'//默认值
            }
</script>

• （label）为输入控件定义文本标签——即显示在输入控件旁边的说明性文字。
  当用户点击由(label)元素定义的文本标签时，与该文本标签关联的输入控件将获得焦点。
• for 属性规定 label 与哪个表单元素绑定 for与id 结合使用
• name属性相同的input标签即为一组,单选框实现互斥效果（或者v-model绑定同一个变量{{}}），只有设置了name属性的表单元素才能在提交表单时传递它们的值。
• value属性是在点击时候传递到页面上的值
  

checkbook 单选框

默认的时候为 false

代码

     <label for="license">
         <!--是否同意 最后获取到是布尔值 用v-model处理-->
         <input type="checkbox" id="license" v-model="isAgree">
            同意协议
     </label>
        <h2>您选择的是：{{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button>

<script>
   const app = new Vue({
        el:'#app',
        data:{
           isAgree:false//默认没有勾选的时候 为false
        },
</script>

label里的for绑定input的id，使当鼠标点击文字时，能关联与之相关的控件。
是否已知用户是否同意？v-model绑定value值，而input中checkbook的value值是Boolean类型，true or false，这里v-model绑定的value值为变量isAgree，设置默认为false（即没有选中的时候），当选择的时候则取反变为true。

checkbox 复选框

<div>
      <input type="checkbox" value="Java" v-model="language">Java
      <input type="checkbox" value="C#" v-model="language">C#
      <input type="checkbox" value="C++" v-model="language">C++
      <input type="checkbox" value="PHP" v-model="language">PHP    
        <h2>您的选择是:{{language}}</h2>
</div>

        const app = new Vue({
            el:'#app',
            data:{
                //多选对应数组类型,接收到后整体打包给服务器即可
                language:[]
            },

一般一个label只绑定一个input，所以此处不用label
v-model绑定language，将接收到的数据放到数组中。
使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

例子：< input v-model=“test”>本质上是
< input :value=“test” @input=“test = $event.target.value”>

select 单选、多选

<div>
            <!--选择单个  字符串类型-->
            <select name="fruit" id="" v-model="fruit">
                <option value="苹果">苹果</option>
                <option value="香蕉">香蕉</option>
                <option value="榴莲">榴莲</option>
                <option value="葡萄">葡萄</option>
            </select>
            <h2>选择水果：{{fruit}}</h2>
        </div>
        <div>
            <!--选择多个  数组类型-->
            <select name="fruit" v-model="fruits" multiple>
                <option value="苹果">苹果</option>
                <option value="香蕉">香蕉</option>
                <option value="榴莲">榴莲</option>
                <option value="葡萄">葡萄</option>
            </select>
            <h2>选择水果(多个)：{{fruits}}</h2>
        </div>

            data:{
            //单选接收到的是字符串 多选用数组接收
                fruit:'葡萄',
                fruits:[]
            },

修饰符

    <div id="app">
        <!--1.lazy-->
        <!--不需要高频率触发焦点-->
        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>

        <!--2.number-->
        <!--v-model绑定数据赋值的时候默认都是String类型，所以当输入数字时，需要都改为number类型-->
        <input type="number" v-model.number="age">
        <h2>{{age}}-{{typeof age}}</h2>

        <!--3.trim-->
        <!--过滤输入时候的空格问题-->
        <input type="text" v-model.trim="name">
        <h2>您输入的名字：{{name}}</h2>
    <script src="vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'Hello',
                age:0,
                name:''
            }
        })
    </script>