Vue中简单的双向数据绑定-信息收集表

最新推荐文章于 2024-07-22 15:13:59 发布

糖留住

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量84

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56428662/article/details/127671377

版权

这些都是一下超级简单的基础，刚开始接触的同学看看还可以

效果图如下：

代码如下：

代码复制之后可以直接粘贴使用，无需做任何更改

<!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>信息收集表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
    <div id="school">
        <h3>学生信息收集表单</h3>
        姓名：<input type="text" placeholder="全名" v-model='name'><br>
        性别：
        <input type="radio" name="a" value="男" v-model="sex">男
        <input type="radio" name="a" value="女" v-model="sex">女
        <br>
        年龄：<input type="number" v-model.number='age'><br>
        所在学校：
        <select v-model="school">
            <option disabled value="">--请选择学校--</option>
            <option>云南A大学</option>
            <option>云南B大学</option>
            <option>昆明C学院</option>
            <option>广西D大学</option>
            <option>百色E学院</option>
            <option>F理工大学</option>
        </select><br>
        个人主页信息：<input placeholder="介绍一下自己吧！" type="text" v-model.lazy="personal"><br>
        兴趣爱好：
        <input type="checkbox" v-model="hobby" value="跑步">跑步
        <input type="checkbox" v-model="hobby" value="跳高">跳高
        <input type="checkbox" v-model="hobby" value="足球">足球<br>
        自我简介：<br>
        <textarea style="height: 60px;" cols="30" rows="10" v-model.lazy="mySelf"></textarea><br>
        <input type="checkbox" checked true-value="是党员" false-value="不是党员" v-model="dangYuan">是否是党员
        <br>
        <button @click="clickButton">提交信息</button>

        <hr>
        <div style="width: 350px;">
            <h3>你录入的信息如下</h3>
            姓名：{{name}}<br>
            性别：{{sex}}<br>
            年龄：{{age}}<br>
            学校：{{school}}<br>
            个人主页：<a href="#" @click="clickPersonal">点击查看主页</a><br>
            兴趣爱好：{{hobby}}<br>
            自我简介：{{mySelf}}<br>
            党员：{{dangYuan}}<br>
        </div>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#school',
            data: function () {
                return {
                    name: '',
                    sex: '',
                    age: '',
                    school: '',
                    personal: '',
                    hobby: [],
                    mySelf: '',
                    dangYuan: '',
                }
            },
            methods: {
                clickPersonal() {
                    if (vm.personal == '') {
                        alert('你还啥都没有填呢')
                    } else {
                        alert(vm.personal)
                    }
                },

                clickButton() {
                    var text = '';
                    if (vm.name == '') {
                        text = text + '名字都不留下，别人怎么知道你是谁\n'
                    }

                    if (vm.sex == '') {
                        text = text + '这里找不到你的性别吗？\n'
                    }

                    if (vm.age < 0 || vm.age == '') {
                        text = text + '这年龄？你妖怪吧！\n'
                    }

                    if (vm.school == '') {
                        text = text + '还是选一下学校比较好\n'
                    }

                    if (vm.personal == '') {
                        text = text + '你的主页什么都没有噶\n'
                    }

                    if (vm.hobby == '') {
                        text = text + '每个人最少都应该有一个爱好才行\n'
                    }

                    if (vm.mySelf == '') {
                        text = text + '先简单介绍一下自己吧\n'
                    }
                    if (true) {
                        if (text != '') {
                            alert(text)
                        } else {
                            alert('提交成功！')
                        }

                    }
                }
            },
        })
    </script>

</body>

</html>