vue简单的金额计算

1、效果图

2、功能说明：输入单价和件数点击其他地方输出总金额

3、代码（vue.js的引入地址目录记得改~~）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>金额计算</title><!-- 引入vue.js --><script src="./vue.js"></script><style type="text/css">#app{width: 300px;height: 200px;margin: auto;text-align: center;padding: 5px 15px;background-color: #e6e7ff;}h1{text-align: center;}input{margin-bottom: 5px;}</style></head><body><div id="app"><h1>金额计算</h1><!-- number转换为数字 --><!-- @change 当内容改变时执行函数 -->单价：<input type="text" v-model.number="n1" @change="calc()">元<br/>件数：<input type="text" v-model.number="n2" @change="calc()">件<br/>运费：<span>10</span>元<br>总金额：<span>{{sum}}</span>元</div><script type="text/javascript">new Vue({el:"#app",data:{n1:0,//单价n2:0,//件数sum:0,//总金额},methods:{calc(){//计算并赋值给sumthis.sum = this.n1*this.n2+10;},},})</script></body>
</html>

vue简单的金额计算相关推荐

用php做一个简单的汇率,vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...
vue计算多列和_vue.js的简单自动求和计算实例
一.导入vue.js 二.前端页面我用了一个表格,话不多说直接上代码数学物理英语总分 {{sum}} 平均分 {{average}} 二. js代码 1.创建一个 vue容器在el中写你的 ...
php 浮点型float 强转int php金额计算 php元转分
float 转int导致的误差太大,出现下面的问题. 浮点数的精度浮点数的精度有限.尽管取决于系统,PHP 通常使用 IEEE 754 双精度格式,则由于取整而导致的最大相对误差为 1.11e-16 ...
问题 H: 简单的打折计算山东科技大学OJ C语言
问题 H: 简单的打折计算时间限制: 1 Sec 内存限制: 2 MB 提交: 17642 解决: 9664 [提交][状态] 题目描述商店规定:消费满n元,可以打八八折.设某件商品标价m元,输入 ...
Vue简单快速上手 idea版
文章目录版本插件安装和通过CDN使用Vue Vue的基本语法 v-bind 条件判断循环监听事件表单双绑 1.什么是双向数据绑定 2.在表单中使用双向数据绑定组件什么是组件第一个Vue ...
项目经理：不要再使用Double类型去进行金额计算啦
文章目录问题描述: 原因分析: 解决方案: 经验总结: 前言:看之前我们先思考一个问题,为什么不使用Double类型去进行金额计算? 浮点数是计算机用来表示小数的一种数据类型,采用科学计数法. 在J ...
Vue简单实现商城订单折扣
Vue简单实现商城订单折扣我开始上传我认为还行的案例了,基本都是我自己写的,思路上可能有借鉴其他人的代码,不过别人的东西你完全掌握了,那你就可以说是你的了. 折扣: 1.单间商品数量满两件88折,满 ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
python基本统计量_Python中简单统计量的计算
本篇文章给大家带来的内容是关于Python中简单统计量的计算,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.这些操作都要确保已经在电脑中安装好了Anaconda集成库,如果安装好 ...

vue简单的金额计算

vue简单的金额计算相关推荐

最新文章

热门文章