v-model用於數據的雙向綁定
<body>
<form action="">
<div id="demo">
用戶名（文本）： <input type="text" name="user" v-model="user"><br><br>
性別（單選）：
<input type="radio" name="sale" value="0" v-model="sex">男
<input type="radio" name="sale" value="1" v-model="sex">女<br><br>
技能（多選）：
<input type="checkbox" name="skill" value="1" v-model="skills"> Jave開發
<input type="checkbox" name="skill" value="2" v-model="skills"> Vue開發
<input type="checkbox" name="skill" value="3" v-model="skills"> PHP開發<br><br>
城市：（下拉框）
<select name="city" v-model="city"> //下拉框的v-model寫在select標簽內，獲取的是option內的value值
<option :value="v.code" v-for="(v,index) in citys " :key="index">{{v.name}}</option>
</select><br><br>
說明：（多行文本）
<textarea name="desc" cols="30" rows="10" v-model="desc"></textarea><br><br>
<input type="submit" value="提交"><br><br>
</form>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#demo",
data: {
user: "",
sex: "",
skills: [], //多選框的屬性值是數組
citys: [ //下拉框的屬性值是數組
{code: 'bj', name: '北京' },
{ code: 'sh', name: '上海' },
{ code: 'gz', name: '廣州' },
{ code: 'sz', name: '深圳' }
],
city: "",
desc: "" },
methods: { }
})
</script>
</body>