热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

uni-app中的数值监控方式及函数的封装和引用方式

1.在商品订单计算商品价格的时候老觉得押金加不上去。后来用了number强转,将类型强转为数值类型才解决问题data(){return{

1.在商品订单计算商品价格的时候老觉得押金加不上去。后来用了number强转,将类型强转为数值类型才解决问题

data() {
            return{
                // 支付数值统计
            statistic:[],
               coupon_money:0,//可抵扣优惠价
                real_total:0,//商品实付金额
                }
//计算变量,避免在html写入冗长计算式
computed: {
            total() {
                return Number(this.statistic.all_price) + Number(this.statistic.all_deposit_price) +  Number(this.statistic.delivery_price) -  Number(this.coupon_money)
            }
//实时监听计算变量的变化
watch: {
            total(val) {
                this.real_total=val
                console.log("total:",val,this.statistic.all_price,this.statistic.all_deposit_price,this.statistic.delivery_price,this.coupon_money )
            }                    

2.总结一下uni-app引用到vue的一些优点:

先封装一个函数计算mixin.js然后将其导出,在引用的文件里导入即可正常使用,主要用于将数值分割成整数和小数两部分,如果数值为整数,小数部分补零:

const tools = {
    data() {
        return {
            buttons: {
                0: { cancel: true, pay: true, flag: "UNPAID", desc: "未支付" },
                1: { cancel: true, flag: "UNCONFIRMED", desc: "待确认" },
                2: { viewOrders: true, flag: "UNSHIPPED", desc: "待发货" },
                3: { viewOrders: true, flag: "SHIPPED", desc: "已发货" },
                4: { delete: true, viewOrders: true, flag: "COMPLETED", desc: "已收货" },
                5: { viewOrders: true, flag: "SERVICING", desc: "售后中" },
                9: { delete: true, viewOrders: true, flag: "BANKING", desc: "已存酒库" },
                10: { delete: true, viewOrders: true, flag: "CANCELED", desc: "已取消" },
                11: { delete: true, viewOrders: true, flag: "AUTOCANCELED", desc: "系统自动取消" },
            }
        }
    },
    methods: {
        getInteger(val) {
            val = val ? Number(val) : 0;
            return val.toFixed(2).split(".")[0]
        },
        getDecimal(val) {
            val = val ? Number(val) : 0;
            return val.toFixed(2).split(".")[1]
        },
    }
}
export default tools

3.在需要引用上面方法的文件夹里导入使用方式:

import tools from "@/mixins/mixin.js";
components: {
            uniIcon,uniPopup,uniDrawer
        },
        mixins: [tools],
        data() {
            return{}
},
}

//然后直接在html里调用mixin.js里的方法即可:
合计:¥{{getInteger(real_total)}}.{{getDecimal(real_total)}}

 


推荐阅读
  • 本文介绍了如何将包含复杂对象的字典保存到文件,并从文件中读取这些字典。 ... [详细]
  • 2020年9月15日,Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性,包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 兆芯X86 CPU架构的演进与现状(国产CPU系列)
    本文详细介绍了兆芯X86 CPU架构的发展历程,从公司成立背景到关键技术授权,再到具体芯片架构的演进,全面解析了兆芯在国产CPU领域的贡献与挑战。 ... [详细]
  • 目录预备知识导包构建数据集神经网络结构训练测试精度可视化计算模型精度损失可视化输出网络结构信息训练神经网络定义参数载入数据载入神经网络结构、损失及优化训练及测试损失、精度可视化qu ... [详细]
  • 本文将介绍如何在混合开发(Hybrid)应用中实现Native与HTML5的交互,包括基本概念、学习目标以及具体的实现步骤。 ... [详细]
  • 包含phppdoerrorcode的词条 ... [详细]
  • 本文节选自《NLTK基础教程——用NLTK和Python库构建机器学习应用》一书的第1章第1.2节,作者Nitin Hardeniya。本文将带领读者快速了解Python的基础知识,为后续的机器学习应用打下坚实的基础。 ... [详细]
  • Android 自定义 RecycleView 左滑上下分层示例代码
    为了满足项目需求,需要在多个场景中实现左滑删除功能,并且后续可能在列表项中增加其他功能。虽然网络上有很多左滑删除的示例,但大多数封装不够完善。因此,我们尝试自己封装一个更加灵活和通用的解决方案。 ... [详细]
  • 本文详细介绍了Java反射机制的基本概念、获取Class对象的方法、反射的主要功能及其在实际开发中的应用。通过具体示例,帮助读者更好地理解和使用Java反射。 ... [详细]
  • 用阿里云的免费 SSL 证书让网站从 HTTP 换成 HTTPS
    HTTP协议是不加密传输数据的,也就是用户跟你的网站之间传递数据有可能在途中被截获,破解传递的真实内容,所以使用不加密的HTTP的网站是不 ... [详细]
  • WinMain 函数详解及示例
    本文详细介绍了 WinMain 函数的参数及其用途,并提供了一个具体的示例代码来解析 WinMain 函数的实现。 ... [详细]
  • 本文介绍如何在 Android 中自定义加载对话框 CustomProgressDialog,包括自定义 View 类和 XML 布局文件的详细步骤。 ... [详细]
  • 在分析Android的Audio系统时,我们对mpAudioPolicy->get_input进行了详细探讨,发现其背后涉及的机制相当复杂。本文将详细介绍这一过程及其背后的实现细节。 ... [详细]
  • [转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]
author-avatar
哇哈时候_206
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有