Detailed explanation of Vue form event data binding
|
<body>
<div id="root">
<form action="" @submit.prevent="demo">
<label for="TW"> Name:</label>
<input type="text" id="TW" v-model.trim="userInfo.account"><br><br> Password:
<input type="password" id="pa" v-model="userInfo.password"><br><br> Age:
<input type="number" v-model.number="userInfo.age"> <br><br> Gender: <input type="radio" name="sex" value="male" v-model="userInfo.sex">Male<input type="radio" name="sex" v-model="userInfo.sex" value="female">Female<br><br> Hobbies: Campus:
<select v-model="userInfo.city">
<option value="school">Please select a campus</option>
<option value="beijing">Beijing</option>
<option value="shanghai">Shanghai</option>
<option value="shenzhen">Shenzhen</option>
</select>
<br><br>
<input type="checkbox" v-model="userInfo.hobby" value="study"> Study<input type="checkbox" v-model="userInfo.hobby" value="sing"> Sing<input type="checkbox" v-model="userInfo.hobby" value="dance"> Dance<input type="checkbox" v-model="userInfo.hobby" value="game"> King<br><br> Other information:
<textarea name="" v-model.lazy="userInfo.other"></textarea><br><br>
<input type="checkbox" v-model="userInfo.agree"> Read and accept the <a href="#">User Agreement</a><button>Submit</button>
</form>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
age: '',
sex: 'female',
city: 'beijing',
hobby: [],
other: '',
agree: '',
}
},
methods: {
demo() {
console.log(JSON.stringify(this.userInfo));
}
}
})
</script>
</body>
SummarizeThis article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: 18 Web Usability Principles You Need to Know
>>: How to deploy k8s in docker
Recommend
Detailed explanation of MySQL partition table
Preface: Partitioning is a table design pattern. ...
Pagination Examples and Good Practices
<br />Structure and hierarchy reduce complex...
The easiest way to reset mysql root password
My mysql version is MYSQL V5.7.9, please use the ...
What are the differences between xHTML and HTML tags?
All tags must be lowercase In XHTML, all tags must...
Vue3 encapsulates the magnifying glass effect component of Jingdong product details page
This article shares the specific code of vue3 enc...
How to prevent Vue from flashing in small projects
Summary HTML: element plus v-cloak CSS: [v-cloak]...
Mysql example of querying all lower-level multi-level sub-departments based on a certain department ID
Simulation tables and data scripts Copy the follo...
What are the benefits of using // instead of http:// (adaptive https)
//Default protocol /The use of the default protoc...
Several ways to submit HTML forms_PowerNode Java Academy
Method 1: Submit via the submit button <!DOCTY...
Detailed explanation of the difference between MySQL null and not null and null and empty value ''''
I believe that many people who have used MySQL fo...
Detailed explanation of the use of HTML header tags
HTML consists of two parts: head and body ** The ...
MySQL paging query optimization techniques
In applications with paging queries, queries that...
Detailed explanation of using Docker to build externally accessible MySQL
Install MySQL 8.0 docker run -p 63306:3306 -e MYS...
How to mount a disk in Linux
When using a virtual machine, you may find that t...
Implementation code of using select to select elements in Vue+Openlayer
Effect picture: Implementation code: <template...