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
xtrabackup backup and restore MySQL database
Due to some of its own characteristics (locking t...
Vue2.0 implements adaptive resolution
This article shares the specific code of Vue2.0 t...
Vue's new partner TypeScript quick start practice record
Table of contents 1. Build using the official sca...
Raspberry Pi msmtp and mutt installation and configuration tutorial
1. Install mutt sudo apt-get install mutt 2. Inst...
Detailed explanation of fetch network request encapsulation example
export default ({ url, method = 'GET', da...
MySQL log settings and viewing methods
MySQL has the following logs: Error log: -log-err...
Detailed explanation of the solution to permission denied in Linux
Permission denied: The reason for this is: there ...
Web page creation question: Image file path
This article is original by 123WORDPRESS.COM Ligh...
How to solve the high concurrency problem in MySQL database
Preface We all know that startups initially use m...
In-depth analysis of MySQL lock blocking
In daily maintenance, threads are often blocked, ...
Issues and precautions about setting maxPostSize for Tomcat
1. Why set maxPostSize? The tomcat container has ...
MySQL joint index effective conditions and index invalid conditions
Table of contents 1. Conditions for joint index f...
Detailed explanation of CSS multiple three-column adaptive layout implementation
Preface In order to follow the conventional WEB l...
Detailed process of installing the docker plugin in IntelliJ IDEA (2018 version)
Table of contents 1. Development Environment 2. I...
A brief discussion on Linux virtual memory
Table of contents origin Virtual Memory Paging an...