21. VUE 的 V-model 指令，双向绑定input【主要绑定表单】

v-model 这个指令用于双向绑定 input 的值，比如下面有个 输入框，他的值就可以用v-model 来绑定：

<div >
    <input type="text" v-model = "message">
    <h2>{{message}}</h2>
</div>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:"您好！ BiHu！"
        }
    })
</script>

你会发现 当你修改 输入框中的值的时候 ，底下的 标题也会跟着改变，因为这就是 "双向绑定"，即 data 中的 message 修改 那么input的值也修改，当input 的值修改，data中的message也一样修改。

其实它的原理我们也可以做：

无非就是 v-bind 绑定 + 一个input 事件触发：

<div >
    <input type="text" :value="message" @input="message = $event.target.value" >
    <h2>{{message}}</h2>
</div>

当然，我们也可以将v-model用于textarea元素【自己测试】

v-model 绑定 radio 使用：

如果我们用单选框 选择性别：

<div >
    <label for="M">
        <input  type="radio" value="男" name="sex"> 男
    </label>

    <label for="F">
        <input  type="radio" value="女" name="sex"> 女
    </label>
    
<!--  要达到互斥的效果 单选框的name需要一致  -->
</div>

普通的选择代码就这样 ，注意 要达到互斥的效果 单选框的name需要一致 这些都是基础 你得懂。

如果你用v-model 去绑定：

<div >
    <label for="M">
        <input  type="radio" value="男"  v-model="sex"> 男
    </label>

    <label for="F">
        <input  type="radio" value="女" v-model="sex"> 女
    </label>

    <h3>如果你用V-model绑定了值 sex，那么 你选择的sex是：{{sex}}
        <br>
        而且你可以name属性 即可达到互斥的效果
    </h3>
</div>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            sex:""  //此时的sex为空 当然你想有默认值的话 可以是 男/女 ｛即radio的value｝
        }
    })
</script>

功能我都一次性说完了。总结以下几点：

1. 可以不用name属性达到互斥单选

2.绑定后 可以随时用 胡须语法 查看选中的值

3.默认值可以直接在 绑定的变量中写 ，不用写原生 checked 属性.

5.响应式改变 sex的值 达到选中

v-model 绑定 checkbox 复选框：

这个复选框 原始的话 如果你选中 他的 checked 属性是为真的 ，反之为假：

我们来个例子（勾选已详细阅读 后 才能进入下一步操作）:

<div >
    <div>
        软件使用说明书
        <br>
        xxxx............... <br>   xxxx............. <br> <br>
    </div>

    <label>
        <input type="checkbox" v-model="already" >      <!--因为是双向绑定 所以按下 already为true-->
        <span ><b>已详细阅读</b></span>
    </label>

    <br><br>
    <button :disabled="!already">下一步</button>   
</div>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            already:false       //一开始肯定是没阅读的
        }
    })
</script>

你还可以打印一下 already 的值 会是 true 、 false 的。

这个是单个 而且绑定的变量初始化是 boolean型的 ，如果是多选框，那么就有特性要理清楚：

<div >
    <label>
        <input type="checkbox" value="篮球" v-model="hobby" >  篮球    <!--因为是双向绑定 所以按下 vue检测到v-model 绑定的类型是什么作出响应操作-->
    </label>

    <label>
        <input type="checkbox" value="羽毛球" v-model="hobby" >   羽毛球
    </label>

    <label>
        <input type="checkbox" value="跑步" v-model="hobby"  >  跑步
    </label>

    <label>
        <input type="checkbox" value="跆拳道" v-model="hobby"  >   跆拳道
    </label>
    
    <h3>    {{hobby}} </h3><!--打印一下hobby-->
</div>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            already:false,      //注意 already 是boolean型
            hobby:[]            //注意 hobby 是数组
        }
    })
</script>

看代码可知，如果你绑定的是变量类型是 boolean 他就帮你操作 选中、未选中，但是如果是数组 他就帮你把这个 复选框的值 添加进去。

我发现 如果他识别不出你是什么类型【其他类型】 默认都按boolean来

v-model 绑定 select 选择框：

<div >
    <h3>请选择你喜欢吃的水果:</h3>
    <select name="fruit"  v-model="fruit">     <!--注意啊 是在这里用v-model-->
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="菠萝">菠萝</option>
        <option value="木瓜">木瓜</option>
    </select>

    <h3>{{fruit}}</h3> <!--打印一下-->
</div>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            fruit:'香蕉',        //可以调初始值  也可以为空(为空默认第一个)
        }
    })
</script>

当绑定的类型是 字符串 可以指定 值，但是 要对应 option 的 value 即可！！！

我们还可以多选 配和 数组 ，多选可以添加到数组中：

<div >
    <h3>请选择你喜欢吃的水果:</h3>
    <select name="fruit"  v-model="fruits" multiple>     <!--name 和 id 你自己换 /// multiple是多选属性 按住ctrl即可-->
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="菠萝">菠萝</option>
        <option value="木瓜">木瓜</option>
    </select>

    <h3>{{fruits}}</h3> <!--打印一下数组-->
</div>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            fruit:'香蕉',        //可以调初始值  也可以为空(为空默认第一个)
            fruits:[]               //这是个数组类型
        }
    })
</script>

这个不怎么常用，会用即可

值绑定

其实这个原理就是 先定义好input的值，然后你把它遍历出来，通过绑定渲染出不同的值 和 不同的属性：

<div >
    <h3>请选择你喜欢的运动:</h3>
    <label v-for="item in hobby" :>
        <input type="checkbox" :value="item" v-model="choice">{{item}}
    </label>
    <h3>您已选择：{{choice}}</h3>
</div>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            hobby:["跑步","游泳","跆拳道","睡觉"],     //运动是可变的，如果你写在input 那么就写死了
            choice:[],           //已选择会存储在这
        }
    })
</script>

原理很简单 自己看代码即可