<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test">
<form action="/XXX" @submit.prevent="handleSubmit">
<span>用户名： </span>
<input type="text" v-model="username"><br>
<span>密码：</span>
<input type="password" v-model="pwd"><br>
<span>性别：</span>
<input type="radio" id="female" v-model="sex" value="女">
<label for="female">女</label>
<input type="radio" id="male" v-model="sex" value="男">
<label for="mnale">男</label><br>
<span>爱好：</span>
<input type="checkbox" id="basket" v-model="likes" value="1">
<label for="basket">篮球</label>
<input type="checkbox" id="foot" v-model="likes" value="2">
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" v-model="likes" value="3">
<label for="pingpang">乒乓球</label><br>
<span>城市：</span>
<select v-model="cityId">
<option value="">未选择</option>
<option :value="city.id" v-for="(city, index) in allCitys" :key="index">{{city.name}}</option>
</select>
<textarea name="" id="" cols="30" rows="10" v-model="textarea"></textarea>
<input type="submit" value="提交">
</form>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
username: '',
pwd: '',
sex: '女',
likes: ['1','3'],
allCitys: [{id: 1, name: 'BJ'},{id: 2, name: 'SH'},{id: 3, name: 'SZ'}],
cityId: '1',
textarea: '1111111111111'
},
computed: {
},
methods: {
handleSubmit(){
console.log(this.username + ' ' + this.pwd)
}
}
})
</script>
</html>
Description: This implements two requirements, the first one is to prevent a form of default event, the second is the value of the dynamic collection and select a variety of input and textarea of