How to get form data in Vue

need
Get data and submit
Template Filters
Filter usage scenarios
Summarize

need

Use Vue to collect user data like this:

insert image description here

Get data and submit

Code implementation:

Bind the value of value to the variable attribute

v-model.trim = 'username' ; remove spaces at both ends

v-model.number = 'age'； Convert the string to a numerical value

v-model.lazy = 'age' ； not collected immediately, but collected after switching focus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get form data</title>
    <script src="/static/js/vue.js"></script>
</head>
<body>
    <div id="container">
        <form action="" @submit.prevent="submit">
            <label for="username">Username:</label><br>
            <input type="text" class="username" name="username" placeholder="Enter username" v-model.lazy="user.username"><br>
            <label for="password">Password:</label><br>
            <input type="password" class='password' name="password" placeholder="Enter password" v-model="user.password"><br>
            <label for="age">Age:</label><br>
            <!-- type is number, only numbers are allowed; input is also a string -->
            <!-- v-model.number, convert the input string into a numerical value -->
            <input type="number" name="age" v-model.number="user.age"><br>
            <label for="">Gender:</label>
            <!-- Abnormal input -->
            <input type="radio" name="sex" v-model="user.sex" value="female">Female<input type="radio" name="sex" v-model="user.sex" value="male">Male<br>
            <!-- Multiple Selection -->
            <label for="">Hobbies:</label>
            <input type="checkbox" v-model="user.hobby" value="pingpong">Table tennis<input type="checkbox" v-model="user.hobby" value="basketball">Basketball<input type="checkbox" v-model="user.hobby" value="football">Soccer<br>
            <!-- Drop-down selection box-->
            <span>Select City:</span><br>
            <select name="city" v-model="user.city" id="">
                <option value="">Select a city</option>
                <option value="zz">Zhengzhou</option>
                <option value="wh">Wuhan</option>
                <option value="bj">Beijing</option>
            </select>
            <br>
            <!-- Text box -->
            <label for="">Description:</label><br>
            <textarea name="desc" v-model="user.desc"></textarea>
            <br>
            <!-- Protocol -->
            <input type="checkbox" name="agree" v-model="user.agree">Read and accept the <a href="http://www.baidu.com">User Agreement</a>
            <!-- Click the button to submit-->
            <button :style="{display:'block',backgroundColor:'lightblue',}">Submit</button>
            <!-- submit -->
            <!-- <input type="submit" value="Submit"> -->
        </form>
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el: "#container",
            data: {
                user: {
                    username: "",
                    password: "",
                    age: "",
                    sex: "",
                    hobby: [],
                    city: "",
                    desc: "",
                    agree: "",
                }
            },
            methods: {
                submit(event){
                    console.log("Submit the form")
                    // In the form, the parameters are automatically submitted console.log(JSON.stringify(this.user))
                },
            },
        })
    </script>
</body>
</html>

Template Filters

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Filter</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/dayjs.min.js"></script>
</head>
<body>
    <div id="container">
        <!-- Filters -->
        <span>{{ time | timeFormatter}}</span><br>
        <!-- The first parameter of the parameter-passing filter is always the pipeline data-->
        <span>{{ time | timeFormatter("YY-MM-DD hh:mm:ss")}} </span>
        <!--Multiple filters can also be connected in series-->
    </div>
    <script>
        Vue.config.productionTip = false
        //Global filter, available in all components Vue.filter("myFilter", function(value){
        	return 'global filtering'
        })
        new Vue({
            el: "#container",
            data: {
                time: 1639579694662, //timestamp, not a string},
			//Local filter, used inside the component filters: {
                timeFormatter(time, format){
                    // The first parameter if (format) {
                        return dayjs(time).format(format)
                    }else{
                        return dayjs(time).format("YYYY-MM-DD HH:mm:ss")
                    }
                },
            },
        })
    </script>
</body>
</html>

Filter usage scenarios

1. Used in interpolation syntax

2. v-bind : attribute = 'xx|xx'

Processing some simple operations generates new data

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:

Vue implements converting form data into json format
Vue form data interactive submission demonstration tutorial
vue adds and edits using the same form, el-form clears form data after form submission
Detailed explanation of how Vue returns values to dynamically generate forms and submit data
Vue implements the function of adding, deleting and modifying form data
How to use Element-ui form in Vue to send data and multiple pictures to the backend
Details of Vue's method for collecting form data

<<: Example of using CSS3 to create Pikachu animated wallpaper

>>: Tutorial on using the hyperlink tag in HTML