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">html</label>
			<br>
			<input type="radio" v-model="picked" id="css" value="css">
			<label for="css">css</label>
			<br>
			<input type="radio" v-model="picked" id="js" value="js">
			<label for="js">js</label>
			<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.