Day06 把Dom操作的注册页面和汇率换算页面,改成Vue操作实现

最新推荐文章于 2023-09-24 09:03:31 发布
最新推荐文章于 2023-09-24 09:03:31 发布
阅读量378 收藏 2
点赞数
分类专栏： web作业题 文章标签： vue js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48277818/article/details/107419008
版权

1.注册页面

(具体图片见day01)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function</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="aaa" value="1">男<input type="radio" name="aaa" value="2">女</td>
        </tr>
        <tr>
            <td align="right">生日:</td>
            <td>
                <select><option value="2000">2000</option>
                    <option value="2001">2001</option>
                    <option value="2002">2002</option>
                </select>年
                <select><option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>月
                <select><option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>日
            </td>
        </tr>
        <tr>
            <td align="right">我正在:</td>
            <td><select>
                <option value="1">学习</option>
                <option value="2">睡觉</option>
                <option value="3">打游戏</option>
            </select></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <img id="img1" v-bind:src='msg'><zidingyi @click="Change()">看不清,换一张?</zidingyi>
            </td>
        </tr>
        <tr>
            <td align="right">验证码:</td>
            <td><input id="inputStr" v-model="inputStr"></td>
        </tr>
        <tr>
            <td></td>
            <td><img src="btn_reg.gif" @click="Go()"></td>
        </tr>
    </table>
</div>

<script>
    new Vue({
        el:"#root",
        data:{
            listUrl:["1111.png","1234.png","2222.png","3333.png",],
            listNum:["1111","1234","2222","3333"],
            midTag:-1,
            msg:'verycode.gif',
            inputStr:''
        },
        methods:{
            Change:function () {
                var bool=true
                while(bool){
                    var num=Math.floor(Math.random()*this.listUrl.length)
                    if (num!=this.midTag){//防止重复出现相同的图片
                        bool=false
                        this.midTag=num
                    }
                }
                this.msg=this.listUrl[this.midTag]
            },
            Go:function () {
                if (this.midTag==-1){
                    if (this.inputStr=="bnksu"){
                        alert("验证码正确")
                    } else{
                        alert("验证码错误")
                    }
                }
                var str=this.listNum[this.midTag]
                if (this.inputStr==str){
                    alert("验证码正确")
                } else{
                    alert("验证码错误")
                }
            }
        }
    })
</script>
</body>
</html>

思路:
1.导入vue.js
2.利用div包括并命名为root,创建vue对象并捕捉root
3.监听Change和Go方法
4.实现Change方法:
a.将img标签中的src通过v-bind绑定,通过msg进行操作
b.只需要将两个list数组存入data中,然后通过this获取,就可对其进行操作(方法同day04,唯一不同的是要改变msg的值)
5.实现Go的方法:
双向绑定input,获取其值以后方法同day04

2.汇率换算页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        select{
            height: 25px;
            margin: 3px;
        }
        input{
            padding: 3px;
            margin: 3px;
        }
        button{
            height: 26px;
            margin-top: 2px;
        }
        table{
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
            text-align: center;
            width: 200px;
            height: 40px;
        }
        .aaa{
            background-color: red;
        }
    </style>
</head>
<body>
<div id="root">
    <select id="select1" v-model="select1">
        <option value="0">美元</option>
        <option value="1">人民币</option>
        <option value="2">欧元</option>
        <option value="3">日元</option>
        <option value="4">韩元</option>
        <option value="5">港元</option>
    </select>
    <button @click="button1()">互换</button>
    <select id="select2" v-model="select2">
        <option value="0">美元</option>
        <option value="1">人民币</option>
        <option value="2">欧元</option>
        <option value="3">日元</option>
        <option value="4">韩元</option>
        <option value="5">港元</option>
    </select>
    数额:
    <input id="inputStr" v-model="inputStr">
    <button @click="button2()">按汇率换算</button>
    <div>
        <table>
            <tr>
                <td class="aaa" colspan="3">按当前汇率换算结果</td>
            </tr>
            <tr>
                <td id="td21">{{td21}}</td>
                <td>汇率</td>
                <td id="td23">{{td23}}</td>
            </tr>
            <tr>
                <td id="td31">{{td31}}</td>
                <td id="td32">{{td32}}</td>
                <td id="td33">{{td33}}</td>
            </tr>
        </table>
    </div>
</div>

<script>
    new Vue({
        el:"#root",
        data:{
            listMoney:['美元', '人民币', '欧元', '日元', '韩元', '港元'],
            listRate:[1, 7,  0.9 , 100, 1000, 8],
            select1:0,
            select2:0,
            inputStr:'',
            td21:'美元',
            td23:'人民币',
            td31:'100',
            td32:'7',
            td33:'700',
        },
        methods:{
            button1:function () {
                var mid=this.select1
                this.select1=this.select2
                this.select2=mid
            },
            button2:function () {
                if (this.inputStr=='') {
                    return
                }
                var rate=this.listRate[this.select2]/this.listRate[this.select1]
                var money=this.inputStr*rate
                this.td21=this.listMoney[select1.value]
                this.td23=this.listMoney[select2.value]
                this.td31=this.inputStr
                this.td32=rate
                this.td33=rate*this.inputStr
            }
        }
    })
</script>
</body>
</html>

思路:
1.导入js
2.将整个框架用div包括,id=root 然后通过vue对象获取id
3.利用v-on:click监听button按钮,实现互换和汇率计算功能
4.互换功能的实现为:
双向绑定select的value值,初始化为0(即美元),然后只需要通过修改vue对象里的select值即可实现互换
5汇率计算功能的实现为:
a.将input进行v-model,然后计算rate和money仅仅需要this+属性(方法同day05)即可计算得到
b.利用插值表达式(’{{}}’)改变td的值,就可以改变相对应的内容.

李柯柯柯南
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现简单实时汇率计算功能
08-31
主要为大家详细介绍了vue实现简单实时汇率计算功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用DOM树实现汇率转换表,注册页面
gy99csdn的博客
02-21 145
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> td{ width: 200px; height: 30px; text-align: center; } .
Day05 实现如下图所示的汇率换算页面(利用js和dom)
m0_48277818的博客
07-17 526
实现如下图所示的汇率换算页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Change</title> <style> select{ height: 25px; margin: 3px; } input{
用vue实现注册页面，汇率转换表
gy99csdn的博客
02-23 449
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
vue页面跳转实现页面缓存操作
11-20
以下是对如何实现Vue页面跳转并进行缓存操作的详细解析： 1. **路由配置**： 在Vue Router的配置中，可以指定某些路由页面需要进行缓存。通过在路由元信息(`meta`)中添加`cache: true`标记，表明该页面需要被缓存...
解决vue页面DOM操作不生效的问题
11-28
猜测是vue使用的虚拟DOM，使得页面虽然已经渲染出来，但在Vue实例中让处在在虚拟DOM中，无法获取。 解决方法： 使用Vue.nextTick，看下官方材料： ‘在下次 DOM 更新循环结束之后执行延迟回调’，这句话不是特别...
解决vue页面渲染但dom没渲染的操作
10-15
在Vue.js应用中，有时会出现页面内容已更新但DOM（文档对象模型）未相应更新的情况。这通常是由于Vue的响应式系统未能及时检测到数据变化，或者是在Vue生命周期的不恰当时间进行了DOM操作。以下是一些解决Vue页面...
用vue实现简单实时汇率计算功能
weixin_33812433的博客
01-15 1086
　　最近在自己摸索vue的使用，因为相对于只是去看教程和实例，感觉不如自己动手写一个demo入门来的快。刚好看到小程序中有一个简单但是很精致的应用极简汇率，而且它的表现形式和vue的表现形式很像，于是想着自己搞一个简单的应用来试试。 第一步是搭好简单的Html结构 <div id="demo"> <h1>汇率转换</h1> ...
vue（汇率计算器）（@事件绑定指令、计算正方形面积） （事件对象）
m0_73495603的博客
10-23 1373
vue汇率计算器 @事件绑定指令、计算正方形面积 事件对象
currency-converter:使用 Vue.js 2.0 构建的货币转换器应用程序
05-30
货币换算 使用 Vue.js 创建的货币转换器 货币转换器利用 Fixer.io 的外汇汇率和货币转换 API 来提供可靠、最新的货币汇率和准确的货币转换。 Currency Converter 目前支持许多世界领先的货币； 但是，我们计划在未来提供更多的货币汇率和兑换。 用法 # clone the repo git clone https://github.com/p-adams/currency-converter # install dependencies npm install # run the server npm run dev
Vue-exchange-rate:Vue功课汇率计算机
04-07
Vue-exchange-rate Vue功课汇率计算机
currency-rates:使用Vue.js https创建的基本货币汇率图表
05-27
货币汇率 使用Vue.js创建的基本货币汇率图表。 费率数据来自 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 整理和修复文件 npm run lint 二手库 自定义配置 请参阅。
CurrencyConverter：货币转换器
02-14
货币换算 在各种货币汇率之间转换，并根据所选日期在图表中显示数据。 从检索货币数据，并使用Chart.js可视化数据 您可以通过以下访问货币转换器： ：
JavaScript中DOM操作训练——数据的增删改查
qq_41929578的博客
10-18 699
题目概述：已知有一套JSON格式的人员数据表 基于该表，实现网页方式的列表显示、计算年龄、重新加载等功能 ================================================ 环境支持：IE 7+ Firefox ================================================ 技术范畴：JavaScript JSON DOM CSS ================================================ 详细说明：
Vuex/Vue 练手项目 在线汇率转换器
weixin_30879169的博客
02-02 514
详情请点击: https://zhuanlan.zhihu.com/p/33362758 转载于:https://www.cnblogs.com/makejeffer/p/8403387.html
vue中如何进行DOM转移？
最新发布
mengran_code的博客
09-24 455
vue关于如何实现DOM转移
vue过滤器
qq_39307099的博客
03-29 276
用一个局部过滤器过滤器实现人民币汇率转换功能，支持美元（0.15汇率）、英镑（0.12汇率） <template> <div> <input v-model="money" type="number" />人民币 <div><span>{{money | moneyFilter(0.15)}}</span>美元</div> <div><span&g
vue 双项绑定的实例 货币转换
丿灬安之若死
02-23 1049
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width"&gt; &lt;title&gt;JS Bin&lt;/title&am
vue3实现登录和注册两个页面
08-18
6. 运行项目：最后，可以运行以下命令来启动Vue项目并查看登录和注册页面： ``` npm run serve ``` 以上就是使用Vue3实现登录和注册两个页面的基本步骤。通过创建路由、组件和导航链接，用户可以在应用中切换到登录...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值