Vue framework-form elements are selected by default
We all know the importance of checkboxes in front-end development. It can be said that they are used everywhere. Recently, I have been learning Vue. After reading the processing methods of Vue, I feel that it is very impressive. Here is a summary of the operations that are selected by default in the form
For the radio button radio, if you want to select "female" or "male" by default, you only need to operate the v-model bound to the input in the data data, the code is as follows
new Vue({
el: "#demo",
data: {
sex: '男'
}
For the checkbox checkbox, if you want to select a certain option by default, you only need to operate the v-model bound to the input in the data data, the code is as follows
<span>爱好:</span>
<input type="checkbox" id="basketball" value="basket" v-model="likes">
<label for="basketball">篮球</label>
<input type="checkbox" id="football" value="foot" v-model="likes">
<label for="football">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
<label for="pingpang">乒乓</label><br>
new Vue({
el: "#demo",
data: {
likes: ['foot'],
}
For the drop-down box select, if you want to select an option by default, you only need to directly operate the v-model bound to select in the data data, the code is as follows
new Vue({
el: "#demo",
data: {
allCitys: [{
id: 1,
name: 'BJ'
}, {
id: 2,
name: 'SH'
}, {
id: 3,
name: 'GZ'
}],
cityId: '2'
}
The previous complete code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
1. 使用v-model(双向数据绑定)自动收集数据
text/textarea
checkbox
radio
select
-->
<div id="demo">
<form action="/xxx" @submit.prevent="handSubmit">
<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" value="女" v-model="sex">
<label for="female">女</label>
<input type="radio" id="male" value="男" v-model="sex">
<label for="male">男</label><br>
<span>爱好:</span>
<input type="checkbox" id="basketball" value="basket" v-model="likes">
<label for="basketball">篮球</label>
<input type="checkbox" id="football" value="foot" v-model="likes">
<label for="football">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
<label for="pingpang">乒乓</label><br>
<span>城市:</span>
<select name="" id="" v-model="cityId">
<option value="">未选择</option>
<option :value="city.id" v-for="(city, index) in allCitys" :key="index">{
{city.name}}</option>
</select><br>
<span>介绍</span>
<textarea name="" id="" cols="30" rows="10" v-model="desc"></textarea><br>
<input type="submit" value="注册">
</form>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#demo",
data: {
username: '',
pwd: '',
sex: '',
likes: ['foot'],
allCitys: [{
id: 1,
name: 'BJ'
}, {
id: 2,
name: 'SH'
}, {
id: 3,
name: 'GZ'
}],
cityId: '2',
desc: ''
},
methods: {
handSubmit() {
console.log(this.username, this.pwd);
}
},
})
</script>
</body>
</html>
The effect is as follows. After
studying vue for a few days, I feel that this framework is too good and will save a lot of time, but it is still necessary to learn native js well, come on, young man!