V-model for two-way binding data
<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 development
<the INPUT of the type = " the CheckBox " name = " skill " value = " 3 " v-Model = " Skills " > PHP Development <br> <br>
city :( drop-down box)
< the SELECT name = " City " V- = Model " City " > // down box v-model written in the select tag, the obtained value is a value within the Option
<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>
newVUE ({
EL: " #demo " ,
Data: {
User: "" ,
Sex: "" ,
Skills: [], // the attribute value is an array of multiple box
the citys: [ // dropdown attribute value is an array
code {: ' BJ ' , name: ' Beijing ' },
{code: ' SH ' , name: ' Shanghai ' },
{code: ' GZ ', name: '广州' },
{ code: 'sz', name: '深圳' }
],
city: "",
desc: "" },
methods: { }
})
</script>
</body>