-
v-model
-
<input type="checkbox" >
-
<input type="radio" >
-
<select ></select>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 包括復選框、單選框、下拉框使用，以及V-model綁定，label for綁定 -->
<title>checkbox_radio_select.html</title>
<script src="../js/vue.js"></script>
<link type='text/css' rel='styleSheet' href='../css/style.css' >
</head>
<body>
<div id="example">
<!-- 復選框 -->
<h4>選擇游戲</h4>
<!-- value是顯示內容，v-model是綁定控件的變量 -->
<input type="checkbox" id="game" value="生化危機7" v-model="checkedGames">
<!-- for=“” 是指綁定id控件 -->
<label for="game">生化危機7</label>
<!-- 比如這邊綁定的是game2，點擊標簽模擬飛行的時候，“模擬飛行”的復選框會自動選上 -->
<input type="checkbox" id="game2" value="模擬飛行" v-model="checkedGames">
<label for="game2">模擬飛行</label>
<input type="checkbox" id="game" value="塞爾達傳說" v-model="checkedGames">
<label for="game">塞爾達傳說</label>
<h4>選擇性別</h4>
<!-- 單選框 -->
<input type="radio" id="sex" value="男" v-model="pickedSex">
<!-- 如果label for綁定的是同一個名字，則只對第一個生效 -->
<label for="sex">男</label>
<input type="radio" id="sex" value="女" v-model="pickedSex">
<label for="sex">女</label>
<h4>你最喜歡的NBA球星是：</h4>
<!-- 下拉框 -->
<select v-model="likedNBAStar" style="width:210px;">
<option>科比</option>
<option>詹姆斯</option>
<option>哈登</option>
<option>庫里</option>
<option>杜蘭特</option>
</select>
<h3>我的全明星：</h3>
<!-- 下拉框加了multiple 意思是可以多選，使用Ctrl加鼠標多選 -->
<select v-model="likedNBAStars" multiple style="width:200px;height:150px;">
<option>戴維斯</option>
<option>格里芬</option>
<option>詹姆斯</option>
<option>杜蘭特</option>
<option>哈登</option>
<option>科比</option>
<option>韋德</option>
<option>庫里</option>
<option>歐文</option>
<option>保羅</option>
</select>
<!-- 讀取內容而已 -->
<p>您選擇的游戲是: {{ checkedGames }}</p>
<p>您的性別是: {{ pickedSex }}</p>
<p>您最喜歡的球星是: {{ likedNBAStar }}</p>
<p>您最喜歡的全明星是: {{ likedNBAStars }}</p>
</div>
</body>
<script>
new Vue({ el: "#example", //設置初始屬性的內容
data: { //初始為空的列表
checkedGames: [], //初始為空元素，僅僅是一個元素而已
pickedSex: null, likedNBAStar: null, likedNBAStars: [] }, //這邊沒用到方法所以沒寫
methods: { } }); </script>
</html>
