用vue实现注册页面，汇率转换表

最新推荐文章于 2022-10-23 10:49:52 发布

greyKing666

最新推荐文章于 2022-10-23 10:49:52 发布

阅读量449

点赞数

分类专栏： WEB前端文章标签： vue

本文链接：https://blog.csdn.net/gy99csdn/article/details/113936469

版权

WEB前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1.注册页面
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

<div id="root">


    <table cellspacing="10px">
        <tr>
            <td>注册邮箱:</td>
            <td><input></td>
        </tr>
        <tr>
            <td></td>
            <td>你还可以手机注册</td>
        </tr>
        <tr>
            <td>创建密码:</td>
            <td><input></td>
        </tr>
        <tr>
            <td>真实姓名:</td>
            <td><input></td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td>
                <input type="radio" name="xxxx">男
                <input type="radio" name="xxxx">女
            </td>
        </tr>
        <tr>
            <td align="right">生日:</td>
            <td>
                <select>
                    <option>2000</option>
                    <option>2001</option>
                </select>年
                <select>
                    <option>01</option>
                    <option>02</option>
                </select>月
                <select>
                    <option>01</option>
                    <option>02</option>
                </select>日
            </td>
        </tr>
        <tr>
            <td align="right">我真在:</td>
            <td>
                <select>
                    <option>学习</option>
                    <option>听课</option>
                    <option>记笔记</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <img id="img1" v-bind:src="url"> &nbsp; &nbsp;<span @click="changeimg">看不清,换一张</span>
            </td>
        </tr>
        <tr>
            <td align="right">验证码: </td>
            <td><input id="inputstr"  v-model="inputstr"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <img src="imge/btn_reg.gif" @click="click1">
            </td>
        </tr>
    </table>
</div>


<script>


    new Vue({
        el: "#root",
        data: {
            list:  ['./imge/1111.png', "./imge/1234.png", './imge/2222.png', './imge/3333.png'],
            listCode : ['1111', '1234', '2222', '3333'],
            tag : -1 ,
            url: 'imge/verycode.gif',
            inputstr: ''
        },
        methods:{
            changeimg: function () {
                var index = Math.floor(Math.random()*this.list.length)
                while (this.tag == index){
                    index = Math.floor(Math.random()*this.list.length)
                }
                this.tag = index
                this.url =  this.list[index]
            } ,
            click1: function () {

                if (this.tag == -1 ){
                    if (this.inputstr == "bnksu"){
                        alert("真")
                    }else {
                        alert("假")
                    }
                }
                if (this.inputstr == this.listCode[this.tag]){
                    alert("真")
                }else {
                    alert("假")
                }
            }
        }
    })



</script>

</body>
</html>

2.汇率转换表

greyKing666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用vue实现注册页面，汇率转换表

1.注册页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script></head><body><div id="root"> <table cell
复制链接

扫一扫