最近看到《vue.js实战》这本书中关于表单和v-model指令的部分，里面有这么一段话：

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为假时不选。

<div class="app">
    <input type="radio" :checked="picked" />
    <label>单选按钮</label>
    <div>{{picked}}</div>
</div>

var app=new Vue({
    el:'.app3',
    data:{
        picked:false
    }
});

看了之后引发我的思考：

首先，单选按钮一般不会单独用，基本都是一组互斥的选项，才会用到单选按钮组。如果是一个选项，可选可不选，那多选钮便可以出场了。

其次，像上述代码，开始时单选按钮并未选中，当选中按钮，picked的值是不变的。在我的理解中，这种当选按钮，比较适合只是根据picked的值来控制单选按钮的选中与否（此处picked的值可以根据后台请求数据，也可以根据其他前端逻辑决定）。个人观点认为，如果真存在这种使用场景，还是将js部分做如下修改：

<div id="app">
    <input  type="radio"  :checked="picked"  @input="handleInput" />
    <div>picked的值为：{{picked}}</div>
    <button @click="change">改变绑定的值</button>
</div>

<script src="../../vue.min.js" type="text/javascript"></script>
<script  type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            picked:false
        },
        methods:{
            change(){
                this.picked = !this.picked;
            },
            handleInput(e){
                debugger;
                this.picked = e.target.checked
            }
        }
});

初始和选中单选按钮的情况如下面两图： 

                      

如果还想实现点击选中，再点击不选中，那可以给单选按钮加上点击事件如下，但是好像就真的是一个单独使用的多选按钮了呢！

pickedClick() {
        console.log("before click:" + this.picked)
        this.picked = !this.picked
        console.log("after click:" + this.picked)
}

再三，那么上述结合inpu事件和v-bind绑定实现了真正意义上的单选按钮的双向绑定，那是不是也像输入框一样可以通过v-model替换二者呢？

<div id="app">
    <input  type="radio"  v-model="picked" />
    <div>picked的值为：{{picked}}</div>
    <button @click="change">改变绑定的值</button>
</div>
<script src="../../vue.min.js" type="text/javascript"></script>
<script  type="text/javascript">

    var app = new Vue({
        el:'#app',
        data:{
            picked:false
        },
        methods:{
            change(){
                this.picked = !this.picked;
            }
        }
    });
</script>

试着去选中单选按钮，喔喔喔，我发现了什么？？改变picked的值，我又发现了什么？所以，单独一个radio上面使用v-model，还是发现诸多神奇的呀，能力有限，暂时不能给出解释，忘各位指点!