Vue入门---实现汇率换算

一、实现简单的汇率换算

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>[colspan] {background: red;}td{width: 200px;height: 30px;text-align: center;}select, button {height: 30px;}input{height: 20px;}div {margin-bottom: 4px;}</style><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="root"><select id="select1" v-model="select1"><option value="1">美元</option><option value="2">人民币</option><option value="3">欧元</option><option value="4">日元</option><option value="5">韩元</option><option value="6">港元</option></select><button @click="change1">互换</button><select id="select2" v-model="select2"><option value="1">美元</option><option value="2">人民币</option><option value="3">欧元</option><option value="4">日元</option><option value="5">韩元</option><option value="6">港元</option></select>数额:<input id="inputStr" v-model="inputStr" ><button @click="click1">汇率换算</button><table border="1px"><tr><td colspan="3">按当前汇率兑换结果</td></tr><tr id="tr1"><td id="td11" v-text="td11">美元</td><td>汇率</td><td id="td13" v-text="td13">人民币</td></tr><tr id="tr2"><td id="td21" v-text="inputStr">100</td><td id="td22" v-text="rate">7</td><td id="td23" v-text="money">700</td></tr>
</table>
</div><script>new Vue({el:'#root',data:{inputStr:'100',listRate:[1, 7,  0.9 , 100, 1000, 7],listM:['美元', '人民币', '欧元', '日元', '韩元', '港元'],select1:1,select2:2,money:700,rate:1,td11:'美元',td13:'人民币'},methods:{//按钮-互换的功能change1:function () {var mid = this.select1this.select1 = this.select2this.select2 = mid},//汇率计算显示click1:function () {//计算汇率this.rate= this.listRate[this.select2-1] / this.listRate[this.select1-1]//显示table第三行this.td11 = this.listM[this.select1-1];this.td13 = this.listM[this.select2-1];this.money = this.rate * this.inputStr;console.log(this.money)}}})
</script>
</body>
</html>

二、效果图

Vue入门---实现汇率换算相关推荐

axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...
python汇率编程_【菜鸟学Python】案例一：汇率换算
汇率换算V1.0 案例描述: 设计一个汇率换算器程序,其功能是将外币换算成人民币,或者相反案例分析: 分析问题:分析问题的计算部分: 确定问题:将问题划分为输入.处理及输出部分: 设计算法:计算部分 ...
建立项目接口文档_分享：一步一个脚印，vue入门之使用mockjs搭建vue项目测试服务器...
在以前的文档中,我们构建了vue项目的整体架构,详见vue入门:vue项目架构设计起步,现在我们主要对其中的mock server 进行完善. 一.概述前后端分离的项目优点之一就是可以前后端并行开发 ...
Vue入门指南-05 Vue实例的生命周期(快速上手vue)
生命周期钩子 = 生命周期函数 = 生命周期事件实例创建期间的生命周期函数 // 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建. // 如果要调用 met ...
Vue入门之animate过渡动画效果
简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 `<!DOCTYPE html>` `<html ...
vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
货币汇率换算器隐私协议
版本更新日期:2022 年 11月 24日版本生效日期:2022年 11月 24日公司:漳州市巨雷网络有限公司地址:福建省漳州市古雷港经济开发区杜浔镇近城村城内自然村278号目录: 我公司如何 ...
汇率换算自然语言理解功能IOS DEMO
前言目前使用语音输入越来越普遍.语音输入不仅高效,而且更加自然,符合人类的输入方式.在这里开发了一个汇率换算的 APP,展示了如何使用语音输入和语音识别. APP简介这个 APP可以识别用户的输入 ...
python长度单位换算用def_【每天学点Python】案例一：汇率换算
汇率换算V1.0 案例描述: 设计一个汇率换算器程序,其功能是将外币换算成人民币,或者相反案例分析: 分析问题:分析问题的计算部分: 确定问题:将问题划分为输入.处理及输出部分: 设计算法:计算部分 ...
python汇率换算程序_Python学习笔记8——汇率计算器
前两次,我们初步学习了Python的图形界面库Tkinter,这一次,我们来试着做一个汇率换算计算器. 还是老样子,先把上次的代码弄过来: fromtkinterimport* root = Tk() ...

Vue入门---实现汇率换算

Vue入门---实现汇率换算相关推荐

最新文章

热门文章