博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
uni-app中的数值监控方式及函数的封装和引用方式
阅读量:4365 次
发布时间:2019-06-07

本文共 2230 字,大约阅读时间需要 7 分钟。

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)}}

 

转载于:https://www.cnblogs.com/Dark-fire-liehuo/p/11049974.html

你可能感兴趣的文章
Hydra爆破神器使用
查看>>
java.util.zip.ZipException: duplicate entry(重复依赖多版本的类库)
查看>>
Run MVC in older version of IIS
查看>>
Ajax 监听
查看>>
隐藏"站长统计"图标
查看>>
Oracle select 中case 的使用以及使用decode替换case
查看>>
创建一个dynamics 365 CRM online plugin (十二) - Asynchronous Plugins
查看>>
Eclipse 常用快捷键 (动画讲解)
查看>>
233 Matrix(矩阵快速幂+思维)
查看>>
Leetcode-Unique Binary Search Trees II
查看>>
Centos7系统下安装Docker
查看>>
PostgreSQL 序列(SEQUENCE)
查看>>
Missing Number
查看>>
Ionic3 demo TallyBook 实例3
查看>>
laravel服务容器
查看>>
Entity Framework的查询
查看>>
ZH奶酪:Python按行读取文件
查看>>
07-使用循环进行遍历数组(运算符)
查看>>
控件布局通用解决方案
查看>>
scala流程控制语句以及方法和函数
查看>>