-
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>
浙公网安备 33010602011771号