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

咸剑飞 發表於 2019-6-19 10:45:00

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

1.在商品订单计算商品价格的时候老觉得押金加不上去。后来用了number强转，将类型强转为数值类型才解决问题
<div class="cnblogs_code">
<pre>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 )
 } </pre>
</div>
2.总结一下uni-app引用到vue的一些优点：
先封装一个函数计算mixin.js然后将其导出，在引用的文件里导入即可正常使用,主要用于将数值分割成整数和小数两部分，如果数值为整数，小数部分补零：
<div class="cnblogs_code">
<pre>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(".")
 },
 getDecimal(val) {
 val = val ? Number(val) : 0;
 return val.toFixed(2).split(".")
 },
}
}
export default tools</pre>
</div>
3.在需要引用上面方法的文件夹里导入使用方式：
<div class="cnblogs_code">
<pre>import tools from "@/mixins/mixin.js";
components: {
 uniIcon,uniPopup,uniDrawer
 },
 mixins: ,
 data() {
 return{}
}，
}

//然后直接在html里调用mixin.js里的方法即可：
合计：￥{{getInteger(real_total)}}.{{getDecimal(real_total)}}</pre>
</div>
  
来源：https://www.cnblogs.com/Dark-fire-liehuo/p/11049974.html

頁: [1]

琼殿技术论坛's Archiver

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