<div id="app"><input type="text" v-model = "message"><h2>{{message}}</h2>
</div><script>const app = new Vue({el:"#app",data:{message:"您好！ BiHu！"}})
</script>

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

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

<div id="app"><label for="M"><input id="M" type="radio" value="男"  v-model="sex"> 男</label><label for="F"><input id="F" 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>

<div id="app"><div>软件使用说明书<br>xxxx............... <br>   xxxx............. <br> <br></div><label><input type="checkbox" v-model="already" >      <!--因为是双向绑定 所以按下 already为true--><span style="color: fuchsia"><b>已详细阅读</b></span></label><br><br><button :disabled="!already">下一步</button>
</div><script>const app = new Vue({el:"#app",data:{already:false       //一开始肯定是没阅读的}})
</script>

<div id="app"><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>

<div id="app"><h3>请选择你喜欢吃的水果:</h3><select name="fruit" id="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>

<div id="app"><h3>请选择你喜欢吃的水果:</h3><select name="fruit" id="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>

<div id="app"><h3>请选择你喜欢的运动:</h3><label v-for="item in hobby" :id="item"><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>