美文网首页
Vue 遍历集合的时候,怎么在html页面执行函数

Vue 遍历集合的时候,怎么在html页面执行函数

作者: 一个冬季 | 来源:发表于2018-06-27 17:23 被阅读710次

    今天我遇到一个问题,就是我在遍历集合的时候,后台把数据封装到对象里面,数字那些都在对象里面,我需要自己处理小数点的问题,问题是我要怎么在遍历的时候,处理小数点呢?
    问题由来:比如我要像如下的方式来执行自己的函数,KilobitMoneyFormat这个是计算4舍5入的一个方法来着,如果我就这样写会报错

    <div v-for="(item , index) in list " :key="index">
                <span class="nameMoneyFlag_item__toDayMon textWhileColor ">
                     {{ KilobitMoneyFormat(item.todayBalance) }}
            </span>
    </div>
    

    改正方法:采用过滤器来做

    <div v-for="(item , index) in list " :key="index">
                <span class="nameMoneyFlag_item__toDayMon textWhileColor ">
                     {{ item.todayBalance | KilobitMoneyFormat }}
            </span>
    </div>
    

    js代码

     vm= new Vue({
            el: '#container',
            data:{
                nameMoneyFlag_item__flag:'nameMoneyFlag_item__flag',
            },
            filters:{//如下这样写
                KilobitMoneyFormat:function (valueNum) {//valueNum就是我们需要的值
                    return KilobitMoneyFormat(valueNum);//返回给前台页面的值
                }
            }
        })
    

    相关文章

      网友评论

          本文标题:Vue 遍历集合的时候,怎么在html页面执行函数

          本文链接:https://www.haomeiwen.com/subject/czkiyftx.html