Vue3案例——设计用户注册页面

最新推荐文章于 2024-07-30 17:19:26 发布

夏天又到了

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量927

点赞数 10

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/brucexia/article/details/136701877

版权

使用Vue.js设计用户注册页面比较简单。通过使用v-model指令对表单数据自动收集，从而能够轻松实现表单输入和应用状态之间的双向绑定。案例代码如例4.15所示。

【例4.15】设计用户注册页面（源代码\ch4\4.15.html）。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设计用户注册页面</title>

</head>
<body>

<div  id="app">
    <form @submit.prevent="handleSubmit">
            <span>用户名称:</span>
            <input type="text" v-model="user.userName"><br>
             <span>用户密码:</span>
            <input type="password" v-model="user.pwd"><br>
            <span>性别:</span>
            <input type="radio" id="female" value="female" v-model="user.gender">
            <label for="female">女</label>
            <input type="radio" id="male" value="male" v-model="user.gender">
            <label for="male">男</label><br>
             <span>喜欢的技术：</span>
            <input type="checkbox" id="basketball" value="basketball" v-model="user.hobbys">
            <label for="basketball">Java开发</label>
            <input type="checkbox" id="football" value="football" v-model="user.hobbys">
            <label for="football">Python开发</label>
            <input type="checkbox" id="pingpang" value="pingpang" v-model="user.hobbys">
            <label for="pingpang">PHP开发</label><br>
             <span>就业城市：</span>
            <select v-model="user.selCityId">
                <option value="">未选择</option>
                <option v-for="city in citys" :value="city.id">{{city.name}}</option>
            </select><br>
              <span>介绍:</span><br>
            <textarea rows="5" cols="30" v-model="user.desc"></textarea><br>
             <input type="submit" value="注册">
    </form>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
                user:{
                    userName:'',
                    pwd:'',
                    gender:'female',
                    hobbys:[],
                    selCityId:'',
                    desc:''
                },
                citys:[{id:01,name:"北京"},{id:02,name:"上海"},{id:03,name:"广州"}],
           }
        },
        methods:{
            handleSubmit(event){
                 console.log(JSON.stringify(this.user));
            }
       }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>
</body>
</html>

在Chrome浏览器中运行程序，输入注册的信息后，单击“注册”按钮，按F12键打开控制台并切换到Console选项卡，可以看到用户的注册信息，如图4-21所示。

本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。

夏天又到了

关注

10
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Vue3案例——设计用户注册页面

使用Vue.js设计用户注册页面比较简单。通过使用v-model指令对表单数据自动收集，从而能够轻松实现表单输入和应用状态之间的双向绑定。案例代码如例4.15所示。在Chrome浏览器中运行程序，输入注册的信息后，单击“注册”按钮，按F12键打开控制台并切换到Console选项卡，可以看到用户的注册信息，如图4-21所示。本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。【例4.15】设计用户注册页面（源代码\ch4\4.15.html）。
复制链接

扫一扫