Vue.js实现一个简单的表单提交并显示的功能

Dear 丶 2023-09-25 20:38 99阅读 0赞

**目录**

任务描述：

效果图：

代码：

--------------------

## 任务描述： ##

> 使用V-model指令实现表单控件的数据绑定，完成用户注册信息的填写和显示功能。当用户填写信息并点击提交后，将用户填写的信息输出至控制台。

## 效果图： ##

填写内容，点击提交

![d6978584205e4d6e8096391e07e3b9fc.jpeg][]

控制台信息：

![4a7128104aaa437591205569d2450907.jpeg][]

## 代码： ##

<body>
        <div id="app">
            <h2>用户注册</h2>
            <form action="">
                <table>
                    <tr>
                        <td>
                            用户名：
                        </td>
                        <td>
                            <input type="text" v-model="username" placeholder="请输入用户名">
                        </td>
                    </tr>
                    <tr>
                        <td>个人简介</td>
                        <td>
                            <textarea v-model="profile" name="" id="" cols="30" rows="10" placeholder="请输入个人简介"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>性别：</td>
                        <td>
                            <input type="radio" v-model="sex" value="男">
                            <label for="">男</label>
                            <input type="radio" v-model="sex" value="女">
                            <label for="">女</label>
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">爱好</td>
                        
                        <td>
                            <input type="checkbox" v-model="checkedName" value="编程">
                            <label for="">编程</label>
                            <input type="checkbox" v-model="checkedName" value="阅读">
                            <label for="">阅读</label>
                            <input type="checkbox" v-model="checkedName" value="运动">
                            <label for="">运动</label>
                            <input type="checkbox" v-model="checkedName" value="音乐">
                            <label for="">音乐</label>
                            <input type="checkbox" v-model="checkedName" value="游戏">
                            <label for="">游戏</label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input @click="selectAll" type="button" value="全选">
                            <input @click="selectNone" type="button" value="全不选">
                            <input @click="selectReverse" type="button" value="反选">
                        </td>
                    </tr>
                    <tr>
                        <td>所在地：</td>
                        <td>
                            <select name="location" id="" v-model="location">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="广州">广州</option>
                                <option value="深圳">深圳</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>感兴趣的职位：</td>
                        <td>
                            <table>
                                <tr>
                                    <td>可选职位</td>
                                    <td></td>
                                    <td>已选职位</td>
                                </tr>
                                <tr>
                                    <td>
                                        <select name="" id="" v-model="job" multiple="multiple" size="5">
                                            <option v-for="(i, index) in joblist" :value="i">{
       {i}}</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input type="button" @click="right" value=">>>">
                                        <br>
                                        <input type="button" @click="left" value="<<<">
                                    </td>
                                    <td>
                                        <select name="" id="" v-model="myjob" multiple="multiple" size="5">
                                            <option v-for="(i, index) in myjoblist" :value="i">{
       {i}}</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="提交" @click.prevent="display">
                            <input type="reset" value="重置">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    
        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    hobbyArray: ['编程', '阅读', '运动', '音乐', '游戏'],
                    username: '',
                    profile: '',
                    sex: '',
                    hobbies: [],
                    location: '',
                    skills: [],
                    joblist: ['工程师a', '工程师b', '工程师c', '工程师d', '工程师e'],// 可选
                    myjoblist: [],// 已选
                    job: [],// 可选选中
                    myjob: [],// 已选选中
                    checked: false
                },
                methods: {
                    display: function () {
                        console.log(this.username);
                        console.log(this.profile);
                        console.log(this.sex);
                        console.log(this.checkedName);
                        console.log(this.location);
                        console.log(this.myjoblist);
                    },
                    selectAll: function () {
                        this.checkedName = this.hobbyArray;
                    },
                    selectNone: function () {
                        this.checkedName = '';
                    },
                    selectReverse: function () {
                        this.tempselect = [];
                        for (var i = 0; i < this.hobbyArray.length; i++) {
                            if (!this.checkedName.includes(this.hobbyArray[i])) {
                                this.checked = true;
                                this.tempselect.push(this.hobbyArray[i]);
                            }
                        }
                        this.checkedName = this.tempselect;
                    },
                    right: function () {
                        for (var i = 0; i < this.job.length; i++) {
                            this.myjoblist.push(this.job[i]);
                            this.joblist.splice(this.joblist.indexOf(this.job[i]), 1);
                        }
                        // this.job=[];
                    },
                    left: function () {
                        for (var i = 0; i < this.myjob.length; i++) {
                                this.joblist.push(this.myjob[i]);
                            this.myjoblist.splice(this.myjoblist.indexOf(this.myjob[i]), 1);
                        }
                        // this.job=[];
                    }
                },
                watch: {
                    checkedName: function () {
                        if (this.checkedName.length > 0) {
                            this.checked = true;
                        } else {
                            this.checked = false;
                        }
                    }
                }
            })
        </script>
    </body>

作为一个菜只因，自己编写的代码多有不足，仍需要日后不断的学习改进。代码中有很多不妥的地方，以及缺少必要的注释信息，且待日后更新完善，这里仅作为大家学习的参考。

如果这篇内容对你有帮助，请老铁们来个一键三连！！！

[d6978584205e4d6e8096391e07e3b9fc.jpeg]: https://img-blog.csdnimg.cn/d6978584205e4d6e8096391e07e3b9fc.jpeg
[4a7128104aaa437591205569d2450907.jpeg]: https://img-blog.csdnimg.cn/4a7128104aaa437591205569d2450907.jpeg