<template>
<div id="app">
<input type="checkbox" id="checked" v-model="checked"/>
<label for="checked">{{checked}}</label><br />
<input type="checkbox" id="jack" value="jack" v-model="names" />
<label for="jack">jack</label>
<input type="checkbox" id="sim" value="sim" v-model="names" />
<label for="sim">sim</label>
<input type="checkbox" id="tom" value="tom" v-model="names" />
<label for="tom">tom</label>
<input type="checkbox" id="mei" value="mei" v-model="names" />
<label for="mei">mei</label>
<p>{{names}}</p>
<input type="radio" id="male" value="male" v-model="gender" />
<label for="male">male</label>
<input type="radio" id="female" value="female" v-model="gender" />
<label for="female">female</label>
<p>{{gender}}</p>
<select name="choose" id="choose" v-model="choose">
<option value="" disabled="">please select</option>
<option value="grade one">grade one</option>
<option value="grade two">grade two</option>
<option value="grade third">grade third</option>
</select>
<p><label for="choose">{{choose}}</label></p>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
checked : false,
names : [],
gender : "",
choose : "",
}
}
}
</script>
