vue
/
Vue


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940
							<!DOCTYPE html>
<html lang="zh">

	<head>
		<title>复选框</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<link href="../css/style.css" rel="stylesheet"> </head>

	<body>
		<div id="myApp">
			<h1>表单复选框</h1>

			<input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames">
			<label for="生化危机7">生化危机7</label>

			<input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">
			<label for="模拟飞行">模拟飞行</label>

			<input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">
			<label for="塞尔达传说">塞尔达传说</label>

			<br>
			<p>您选择的游戏是:</p>
			<p v-for="game in checkedGames"> {{ game }} </p>

		</div>
		<script>
			var myApp = new Vue({
				el: '#myApp',
				data: {
					checkedGames: []
				},
				methods: {},
			});
		</script>
	</body>

</html>