微信小程序实现WXML中直接处理数据，并且保留两位小数

最新推荐文章于 2022-12-08 10:24:30 发布
最新推荐文章于 2022-12-08 10:24:30 发布
阅读量1.5k 收藏 4
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45432996/article/details/109163059
版权

1.新开一个页面，叫addmul.wxs，写入下面的函数等内容

var filters = {
  //百分比数据
    Percentage: function(number1,number2){
      return (Math.round(number1/(number2)*10000)/100.00+"%")
  }
}
module.exports = {
  Percentage: filters.Percentage
}

2.在需要处理数据的地方引入
在这里插入图片描述

3.如果有循环的数据直接将数据带入

<view class="tr" wx:for="{{YWHHXRS}}" wx:key="index">
                    <view class="td"  style="width:150rpx">{{item.XM}}</view>
                    <view class="td">{{item.XB == 1? '男': '女'}}</view>
                    <view class="td">{{item.AGE}}</view>
                    <view class="td">{{item.ZZMM}}</view>
                    <view class="td">{{item.LZFH}}</view>
                    <view class="td">{{item.TPZS}}</view>
                    <view class="td">{{filters.Percentage(item.TPZS,item.TPRS)}}</view>
                    <view class="td">{{item.TPMJ}}</view>
                    <view class="td">{{filters.Percentage(item.TPMJ,item.TPMJ)}}</view>
                </view>

其中filters.Percentage(item.TPZS,data.TPRS）具体是指：
执行函数 Percentage(69,99）
结果会在页面中返回69.7%

喔烨鸭
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序wxml数据绑定总结
03-29
今天系统的记录一下wxml的数据绑定功能。吐舌头  首先给出要用到的wxss样式文件   /* pages/wxml/wxml.wxss */ .wxml-container{ padding: 0 20rpx ; align-items: center; }   .topic-group{ background: pink; width: 100%; text-align: center; margin-top: 40rpx; }   #text1{ margin-top: 0; }   text{ width: 100%; text-align: center; }   .topic-it
微信小程序实现通过js操作wxml的wxss属性示例
10-17
主要介绍了微信小程序实现通过js操作wxml的wxss属性,结合实例形式分析了微信小程序使用js操作wxml的wxss属性相关原理、实现技巧与操作注意事项,需要的朋友可以参考下
微信小程序在wxml中的数据保留小数和取整
m0_60336681的博客
12-02 3455
1、在until文件夹下，新建 tool.wxs var filters = { toFix2: function (value) { return parseFloat(value).toFixed(2)//此处2为保留两位小数 }, toFix1: function (value) { return parseFloat(value).toFixed(1)//此处1为保留一位小数 }, toFix: function (value) { return pars
微信小程序 之wxml保留小数点后两位数的方法及转化为字符串的方法
06-17 825
原理：wxml中不能直接使用较高级的js语法，如‘.toFixed’，‘toString()’，但可以通过引入wxs模块实现效果 1.新建`filter.wxs` var filters = { toFix: function (value) { return value.toFixed(2) // 此处2为保留两位小数，保留几位...
小程序 如何在wxml中保留小数点后2位
Lenny-zlp的博客
09-02 1073
wxml中不能直接使用较高级的js语法，如.toFixed，但可以通过引入wxs模块实现效果 新建一个.wxs 如： convertUtil.wxs var filters = { toFix: function (value) { return Number(value).toFixed(2)//此处2为保留两位小数 } } module.exports = { toFix: filters.toFix } WXML中引入WXS 并使用 <wxs module=.
微信小程序的wxml实现复杂运算或者数据处理
shi450561200的博客
12-08 1305
在微信小程序的wxml中可以在{{}}进行里进行简单的三目运算。但是复杂的比如字符串截取,parseInt()、str.split()、num.toFixed()，substring等在{{}}里是无效的。本文旨在解决这个问题 2.在模板的wxml中执行复杂运算
小程序在wxml中使用js，wxs，取整，判断等操作
wyp1725726792的博客
05-20 1999
小程序小记今天在使用后台返回的数据的时候，发现返回的价格是0.16899999999999998 今天在使用后台返回的数据的时候，发现返回的价格是0.16899999999999998 这肯定是不能这样显示的，需要进行取整限制一下，但是我常识 ...
小程序数字相加保留两位小数_C程序使用结构将两个数字相加
culing2941的博客
09-11 1111
小程序数字相加保留两位小数 #include<stdio.h> #include<conio.h> struct sum { int a; int b; }; void main() { int sum1; struct sum s; clrscr(); printf(“Enter two numbers:”); scanf(“%d%d”,&s....
小程序wxml根据渲染值返回对应的内容
xiaokangna的博客
12-30 502
小程序在wxml中根据渲染的值去判断返回对应的内容 首先新建一个index.wxs的文件夹 然后将需要判断的内容方法写好 var advanced = { intermediate: function (item) { var intermediate = {}; var x = ""; var y = ""; switch (item) { case "1": x = "男"; y = "#bce672"; b
实现微信小程序的wxml文件和wxss文件在phpstrom的支持
03-29
最近下载了微信小程序准备好好看看，但是发现微信小程序用的后缀名是不一样的，.wxml代表的就是平时用的.html，.wxss代码的就是平时用的.css。但是phpstorm无法识别，为了更方便的码代码 对wxml文件的支持： 设置>...
微信小程序 WXML、WXSS 和JS介绍及详解
10-21
主要介绍了微信小程序 WXML、WXSS 和JS介绍及详解的相关资料,需要的朋友可以参考下
微信小程序wxml列表渲染原理解析
10-15
主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序如何显示两位小数
qq_43279097的博客
09-09 1105
微信小程序如何快速显示2位小数点
在微信小程序wxml中保留数据两位小数
weixin_42157001的博客
07-09 3431
首先，创建 numberUtil.js ，并写入以下代码： var numberUtil = { numberFormat: function(value) { var v = parseInt(value) //强转Int，毕竟有可能返回是String类型的数字 return v.toFixed(0) }, numberFormat1: function(value) { var ...
微信小程序wxml页面toFixed保留两位小数，wxs脚本语言
weixin_30295091的博客
08-06 738
在wxml页面执行toFixed函数的时候发现失效，在微信小程序的js页面是生效的，但是我不希望在data中保留这些额外的数据，于是找到了下面这种解决方案wxs脚本语言。 <wxs module="m1"> var numberToFix= function (value) { return value.toFixed(2) } module....
JS（微信小程序） 两数相除取百分比%并保留两位小数
欧巴酱的CSDN
07-27 9206
function Percentage(number1, number2) {      return (Math.round(number/ (number1+number2) * 10000) / 100.00 + "%");// 小数点后两位百分比     }  
Pyspark基础操作( rdd dataframe 创建 读取 利用）
BiuFEIMIR的博客
12-06 2196
Part1 Pyspark 1.读取数据 #enableHiveSupprot() 支持hive操作 #getOrCreate() 如果没有就创建，有就不用了 spark = SparkSession.builder.appName("appName").enableHiveSupport().getOrCreate() spark.sparkContext.pythonExec = spark.conf.get('spark.yarn.appMasterEnv.PYSPARK_PYTHON') pa
微信小程序 自定义组件-数据、方法、属性
qq_35262929的博客
11-09 1095
微信小程序中自定义组件的数据、方法、属性及数据监听器
微信小程序写选择题类型
qq_45432996的博客
10-18 3496
本人拿到的需求是投票类型，所以数据是后端传过来的数据，类似选择题也可以参考此方法，但是如果是一个页面只展示一个的这种就不适用。 效果图： <view class=""> <view wx:for="{{ITEMSLIST}}" wx:key="index" class="guiyue-item" > <view class="guiyue-item-title"> <view&
微信小程序中wxml如何执行数组中的方法
最新发布
08-15
### 回答1： You can execute a method in an array in a WeChat mini-program's WXML by using the `wx:for` directive to loop through the array and bind the method to an event, such as a button click. Here is an example: ``` <!-- in the data section --> data: { myArray: [ { name: 'item1', method: function() { console.log('method 1 called'); } }, { name: 'item2', method: function() { console.log('method 2 called'); } } ] } <!-- in the template section --> <template wx:for="{{myArray}}" wx:key="index"> <view>{{item.name}}</view> <button bindtap="{{item.method}}">Call Method</button> </template> ``` In this example, the `wx:for` directive is used to loop through the `myArray` array and bind each method to the button's `bindtap` event. When the button is tapped, the corresponding method will be executed. ### 回答2： 在微信小程序的wxml中无法直接执行数组中的方法，因为wxml是可视化界面的展示层，主要负责数据的渲染和展示，并不具备直接执行方法的能力。不过，我们可以通过在wxml中绑定事件，然后在对应的事件处理函数中调用数组中的方法来达到间接执行的效果。 具体操作如下： 1. 在wxml中使用`{{}}`的插值表达式来绑定需要执行的方法，例如`{{methodName}}`。 2. 将需要执行的方法名赋值给`methodName`，可以通过在页面的js文件中定义一个与数组中方法同名的函数，并将该函数名赋值给`methodName`。 3. 在wxml中绑定事件，例如`<view bind:tap="handleTap"></view>`，这里通过`bind:tap`事件绑定一个名为`handleTap`的事件处理函数。 4. 在相应的事件处理函数（`handleTap`）中通过调用`methodName`来间接执行数组中的方法。 例如，假设有一个数组`methods`包含了多个方法名： ```javascript Page({ data: { methodName: '', methods: ['methodA', 'methodB', 'methodC'], }, methodA() { console.log('执行了方法A'); }, methodB() { console.log('执行了方法B'); }, methodC() { console.log('执行了方法C'); }, handleTap(e) { const { index } = e.currentTarget.dataset; const methodName = this.data.methods[index]; // 通过索引获取对应的方法名 this.setData({ methodName }); // 设置methodName为对应方法名 }, }); ``` 然后在wxml中，通过`wx:for`循环遍历数组，并绑定点击事件： ```html <view wx:for="{{methods}}" wx:for-index="index" bind:tap="handleTap" data-index="{{index}}"> 点击执行 {{item}} 方法 </view> ``` 当用户点击对应的视图时，会触发`handleTap`事件处理函数，然后通过`methodName`间接调用相应的数组中的方法。这样就实现了在微信小程序的wxml中通过数组间接执行方法的效果。 ### 回答3： 在微信小程序的wxml中，我们可以通过以下步骤来执行数组中的方法： 1. 首先，在wxml中使用{{}}的双大括号语法引用数组。例如，如果数组名称为array，我们可以在wxml中使用{{array}}来引用该数组。 2. 接着，我们可以使用{{}}内嵌JavaScript表达式的形式，执行数组中的方法。例如，如果数组中有一个方法为myMethod，我们可以通过{{myMethod()}}来执行该方法。 3. 如果数组中的方法需要传递参数，我们可以在{{}}内的括号中传递参数。例如，如果myMethod需要接收一个参数x，则可以使用{{myMethod(x)}}的形式来执行该方法并传递参数x。 需要注意的是，wxml中的方法执行是在小程序的逻辑层进行的，而不是在视图层执行的。因此，如果数组中的方法需要实时更新视图层的数据，我们需要在方法中使用setData来更新数据。 总结起来，要在微信小程序的wxml中执行数组中的方法，我们可以使用{{}}双大括号引用数组，并在{{}}内的表达式中调用需要执行的方法。如果有参数，可以在括号中传递参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值