Vue(二十一)——v-model的本质是什么

v-model是vue一个非常神奇的命令，可以做到双向绑定，顾名思义就是将一个字段的值与一个通过输入来发生改变的值关联起来。

可以认为单凡有输入的地方就会有双向绑定的需求。可以认为v-model就是两个v-bind

<a-form-model-item label="查询类型" >
    <a-radio-group
            v-model="formData.queryTypeData"       
//相当于两个方向的v-bind:
// 一个方向：v-bind:XX="formData.queryTypeData"
// 另外一个方向：v-bind:"formData.queryTypeData"="xx"
// 而这个xx就是a-radio-group的value，这个value值是从<a-radio>的value收集上来的，所以跟<a-radio>的value值并不是一个。
            prop="formRules.queryTypeRule">
        <a-radio
                v-for="(item,index) in formItem2.queryTypeItem"
                :key="index"
                :value="item"
//这里:value绑定了item是因为这个value不是group的value，如果是group的value的话，queryTypeData的值会随着item的值变化的。group的value值和radio的value值单向绑定的关系。后者可以影响前者，但是前者不能影响后者。
        >
            {{item}}
        </a-radio>
    </a-radio-group>
</a-form-model-item>

v-model就是两个方向的v-bind，而中间那个中介字段就是antd网站上公布的xx（v-model），这里radio-group使用的是value。

要注意这里的<a-radio>必须在一个<a-radio-group>里面，因为只有group才存在有多个选项中选择一个情况，而这个选择的结果就是由用户的输入决定的，因此也就是用户的输入改变字段的值的过程。

而单个的<a-radio>在表单中并不存在，因为表单看起来只有一个选项，其实是有两个radio，一个是item，是一个是！item，并不存在只有一个item的情况。

也许你会说只有一个选项，而选择的结果是yes或者no，不是的，选择的结果由value给出，value的值就是item的值，比如说"带宽"，而不是这个radio的状态（选或者不选）。如果用状态来做双向绑定的话，就要用checked来做绑定，而不是value了。那么字典前面的key值就需要是item（value）的值，不然后台不知道是什么东西被checked了。由于antD是默认使用value绑定，所以需要另外写一个radio，并把这两个radio放在同一个group里面，然后再将！item那个radio display，然后在第一个radio处写一个click事件，表示click一下，checked就取反，而第一个radio的checked取反，第二个radio的checked就被选择了，这样就可以得到第二个radio的value值。这种情况还不如将第二个radio展示出来liaopie。