Vue双向绑定二（v-model与单选按钮）

Vue双向绑定二（v-model与单选按钮）

一、单选按钮在单独使用时

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

<div id="app12">
			<input type="radio" :checked="picked" id="radio" value="hyml"/>
			<label for="radio">:check单选按钮label>
			<p>{{picked}}p>
		
		div>
		<script type="text/javascript">
			var app12 = new Vue({
				el:'#app12',
				data:{
					picked:'true'
				}
			})
		script>

v-bind的语法糖为’:’
:checked 相当与v-bind:checked

单选按钮组合使用

如果单选按钮组合使用来实现互斥选择的效果，就需要v-model配合value来使用：

<div id="app11">
			<input type="radio" v-model="picked" id="html" value="html" />
			<label for="html">htmllabel>
			<br>
			<input type="radio" v-model="picked" id="css" value="css">
			<label for="css">csslabel>
			<br>
			<input type="radio" v-model="picked" id="js" value="js">
			<label for="js">jslabel>
			<br>
			<input type="text" v-model="picked" placeholder="请输入你选择"/>
			<p>你的选择是{{picked}}p>
		div>
		<script type="text/javascript">
			var app11 = new Vue({
				el:'#app11',
				data:{
					picked:''
				},
				//v-model与data里的值有关,@input与方法有关
				// methods:{
				// 	input:function(e){
				// 		this.picked=e.target.value;
				// 	}
				// }
			})
		script>

注意： 以上代码需要导入vue.js.