vuejs 指令之 v-model

v-model

随表单控件类型不同而不同。在表单控件或者组件上创建双向绑定(官网解释)
主要作用：负责收集页面的数据（比如用户名和密码等）
用法：v-model=“属性名” ---- 这里收集到的数据会给 vm data 对象里有这个属性名的那个属性，而 data 里的内容也可以给页面上其他利用了这个属性的元素

<!-- v-model :负责收集页面的数据，之前我们都是从data里向页面-->
<!--在表单控件或者组件上创建双向绑定-->
    <div id="box">
        <h2>{{ title }}</h2>
        <!--要收集的信息，在元素里加上 v-model ,这里收集到的数据会给vm对象里有这个属性名的那个属性-->
        姓名：<input type="text" placeholder="请输入名字...." v-model="username">
        <!--收集到的数据在这里展示，从vm对象中获取数据，也就是上面收集到的数据给vm，然后vm又把数据赋给下面-->
        <h3>收集到的数据 {{ username }}</h3>
    </div>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                title: "收集数据",
                username: ''  //代表收集数据的容器变量，一般给一个初值
            }
        })
    </script>

v-model 用法一：多选框

<input type=“checkbox” v-model=’‘isSelect’>
对于上面的那行代码，我们发现，如复选框被选中，则 isSelect 的值为true，如果选中取消，则为 false 。同时，如果我们设定 isSelect 的值为 true 或者 false ，复选框也会发生改变，勾选还是不勾选，所以通过这个方式我们获取设置复选框的状态

<div id="box">
    <!--因为有多个选择，所以三个都使用相同的模型变量，这样就可以放在一个数组里了-->
    hobby:  <input type="checkbox" v-model="hobby" value="basketball" /> 篮球
            <input type="checkbox" v-model="hobby" value="swimming" /> 游泳
            <input type="checkbox" v-model="hobby" value="chess" /> 下棋
    <hr />
    <h3>除了多选框，CheckBox有时还可以作为单选，比如协议的同意与否</h3>
    <!--这个只有一个选择，我们会用boolean值来作为变量值-->
    <input type="checkbox" v-model="isAgree"> 同意
    <br />
    {{ isAgree ? "同意" : "不同意" }}
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            hobby: [ ], //因为可以多选，所以我们用一个数组来接收
            isAgree: true, //默认选中，当我们取消勾时，会变为false,我们可以在上面做一个证明
        }
    })
</script>

单选框

 <!--单选框-->
    性别: <br />
        <input type="radio" v-model="gender" value="male" /> 男
        <input type="radio" v-model="gender" value="fmale" />  女
        <input type="radio" v-model="gender" value="secret" />  秘密
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            gender: 'male', //因为是单选，所以一个字符串就可以了,默认为男
        }
    })
</script>

下拉框

使用 v-model 的时候，如果 option 中没有 value 值，则以内容为主，如果有value 值，就以 value 值为主
下拉框默认情况下是单选，但是我们也可以设置多选，只要在select标签上加上 multiple 属性，我们在选择的时候，选中一个，按住 alt 键，可以选择多个

<div id="box">
    <!--select 下拉框 -->
    <select v-model="city">
        <option value="0"> 请选择 </option>
        <option value="sh"> 上海 </option>
        <option value="bj"> 北京 </option>
        <option value="sz"> 深圳 </option>
    </select>
    <!--注意，但我们使用 v-model 的时候，如果 option 中没有 value 值，则以内容为主，如果有value 值，就以 value 值为主-->
    <hr />
    <h3>下拉框多选</h3>
    <!--下拉框默认情况下是单选，但是我们也可以设置多选，只要在select标签上加上 multiple 属性，我们在选择的时候，选中一个，按住 alt 键，可以选择多个-->
    <select v-model="cities" multiple>
        <option> 请选择 </option>
        <option> 上海 </option>
        <option> 北京 </option>
        <option> 深圳 </option>
    </select>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            city: '',//像地址这样的一般只有一个，所以我们用字符串
            cities: [ ], //地址为多选了，所以我们要用一个数组来接收
        }
    })
</script>

个人理解：v-model 是我们用来收集页面信息的，所以在表单中会出现的较多，大多数时候它所收集的使我们的 value 值，但在某些情况下，如 复选框，下拉框中，如果没有设置value 属性，则它所反应的是 checked 属性 或者下拉框中的内容，我认为这应该是在他内部设置好了会反应这些属性，具体是为什么，我也不是很清楚