Detailed explanation of Vue form event data binding

Detailed explanation of Vue form event data binding

insert image description here

<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>

Summarize

This 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:
  • Detailed explanation of Vue form binding and components
  • Vue form dynamically add components practical example
  • Vue loop component plus validate multi-form validation example
  • Vue form input binding v-model
  • Do you know Vue's double binding of forms and components?

<<:  18 Web Usability Principles You Need to Know

>>:  How to deploy k8s in docker

Recommend

Parsing Apache Avro Data in One Article

Abstract: This article will demonstrate how to se...

MYSQL custom function to determine whether it is a positive integer example code

You can write a function: Mainly use regular expr...

Detailed explanation of Javascript string methods

Table of contents String length: length charAt() ...

Implementation of Webpack3+React16 code splitting

Project Background Recently, there is a project w...

Vue Element front-end application development preparation for the development environment

Table of contents Overview 1. Develop the require...

Sample code for testing technology application based on Docker+Selenium Grid

Introduction to Selenium Grid Although some new f...

About ROS2 installation and docker environment usage

Table of contents Why use Docker? Docker installa...

Detailed explanation of whereis example to find a specific program in Linux

Linux finds a specific program where is The where...

JavaScript data flattening detailed explanation

Table of contents What is Flattening recursion to...

How to solve the problem of automatic package update in Debian system

I don't know when it started, but every time ...

Goodbye Docker: How to Transform to Containerd in 5 Minutes

Docker is a very popular container technology. Th...

DOM operation table example (DOM creates table)

1. Create a table using HTML tags: Copy code The ...

Javascript scope and closure details

Table of contents 1. Scope 2. Scope Chain 3. Lexi...

Detailed explanation of redis5 cluster construction and usage under Linux (Centos7)

Table of contents 1. Brief description 2. Steps t...

Three examples of nodejs methods to obtain form data

Preface Nodejs is a server-side language. During ...