Vue实验三：属性、方法

Yuexin️

已于 2024-07-10 10:04:00 修改

阅读量133

点赞数 2

文章标签： vue.js javascript 前端

于 2024-05-31 22:00:54 首次发布

本文链接：https://blog.csdn.net/Violetto_Yan/article/details/139362220

版权

一、实验目的
1、属性的基本使用
2、方法的基本使用
3、侦听器的应用
4、表单数据的绑定
5、样式的绑定
二、实验内容
实现一个功能完整的用户注册页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验3：属性、方法</title>
    <script src="vue.3.2.36.js"></script>
    <style>
        .container{
            text-align: center;
        }

        input{
            background-color: #fffa95;
            background-color: cornsilk;
            width: 300px;
            border-radius: 6px;
            height: 25px;
        }

        button{
            background-color: deepskyblue;
            height: 40px;
            width: 300px;
            border-color: blue;
            color: white;
            margin-top: 30px;
            border-radius: 10px;
        }
    </style>
</head> 
<body>
    <div class="container" id="app">
    <p>加入我们，一起创造美好世界</p>
    <h1>创建你的账号</h1>
    <div class="inputCon" v-for="(item,index) in items" >
        <p>{{item.title}}
            <span style="color:red;">*</span>
        </p>
        <input type="text" v-model="item.model"  name="inputlook">
        <p v-if="index==2">请确认密码程度需要大于6位</p>
    </div>
    <div class="subCon">
        <p>偏好设置</p>
        <input type="checkbox" style="width:auto">接受更新邮件
        
    </div>
    <button @click="createAccount">创建账号</button>
    </div>
    <script>
        const App={
            data(){
                return{
                    items:[
                        {
                            title:'用户名',
                            model:''
                        },{
                            title:'邮箱地址',
                            model:''
                        },{
                            title:'密码',
                            model:''
                        }
                    ]
                }
            },
            computed:{
                name:{
                    get(){
                        return this.items[0].model
                    },
                    set(value){
                        this.items[0]=value
                    }
                },
                email:{
                    get(){
                        return this.items[1].model
                    },
                    set(value){
                        this.items[1]=value
                    }
                },
                password:{
                    get(){
                        return this.items[2].model
                    },
                    set(value){
                        this.items[2]=value
                    }
                }
            },
            methods:{
                createAccount(){
                 console.log(`name:${this.name}\npassword:${this.password}\nemail:${this.email}`)   
                }
                
            }
            
        }
        Vue.createApp(App).mount("#app");
    </script>

</body>
</html>