vue中的数据格式化filters、formatter方式

 更新时间:2024年07月18日 09:57:43   作者:小蒜瓣  
这篇文章主要介绍了vue中的数据格式化filters、formatter方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue数据格式化filters、formatter

一、filters过滤器函数可以使用在两个地方

  • 1.双大括号表达式 {{ 文本字符串 | 过滤函数 }}
  • 2.v-bind:str= "文本字符串 | 过滤函数"

以下实例为四舍五入,以及过滤器串联后11.11

<template>
    <div style="text-align:right;margin-bottom:10px">
        总金额:
        <span class="color-blue font18">¥{{ listAmount | numFilter }}元                </span> 
         <!-- 0.11 -->
        <span class="color-blue font18">¥{{ listAmount | Hundredfold | numFilter }}元                </span> 
         <!-- 11.11 -->
    </div>
</template>
<script>
    export default {
        name: "OpeningList",
        data: function() {
            return {
                listAmount: 0.111119
            }
        }
    },
    filters: {
        Hundredfold(value) {
            return realVal*100;
        },
        numFilter(value) {
            const realVal = parseFloat(value).toFixed(2);
            return realVal;
        }
    },
    mounted: function() {
    }
</script>

二、table :formatter=function

<template>
  <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" >
    <el-table-column prop="name" label="姓名" s width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"
      :formatter="formatter"> </el-table-column>
    <!-- 地址:上海市普陀区金沙江路 1518 弄 -->
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return '地址:'+row.address;
      }
    }
  }
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue获取input值的四种常用方法

    Vue获取input值的四种常用方法

    Vue是一种流行的Web开发框架,它提供了一个双向绑定的语法糖。在Vue中,我们可以很容易地获取页面上的数据,并且可以实时的响应其变化,这篇文章主要给大家介绍了关于Vue获取input值的四种常用方法,需要的朋友可以参考下
    2023-09-09
  • Vue+element-ui 实现表格的分页功能示例

    Vue+element-ui 实现表格的分页功能示例

    这篇文章主要介绍了Vue+element-ui 实现表格的分页功能示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vuejs2.0子组件改变父组件的数据实例

    vuejs2.0子组件改变父组件的数据实例

    本篇文章主要介绍了vuejs2.0子组件改变父组件的数据实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • element的el-upload组件上传文件跨域问题的几种解决

    element的el-upload组件上传文件跨域问题的几种解决

    跨域问题网上搜索很多,感觉情况都不一样,本文主要介绍了element的el-upload组件上传文件跨域问题的几种解决,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • vuex中store存储store.commit和store.dispatch的区别及说明

    vuex中store存储store.commit和store.dispatch的区别及说明

    这篇文章主要介绍了vuex中store存储store.commit和store.dispatch的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 一文带你搞定svg-icon的使用方式

    一文带你搞定svg-icon的使用方式

    这篇文章主要介绍了一文带你搞定svg-icon的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 浅谈vue-cli加载不到dev-server.js的解决办法

    浅谈vue-cli加载不到dev-server.js的解决办法

    本篇文章主要介绍了浅谈vue-cli加载不到dev-server.js的解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue实现定位并解决内存泄漏

    Vue实现定位并解决内存泄漏

    Vue.js 是一个流行且强大的 JavaScript 框架,它允许我们构建动态和交互式 Web 应用程序,本文我们将深入探讨 Vue.js 应用程序中内存泄漏的原因,并探索如何定位和修复这些问题的有效策略,希望对大家有所帮助
    2023-09-09
  • 在vue中使用Echarts画曲线图的示例

    在vue中使用Echarts画曲线图的示例

    这篇文章主要介绍了在vue中使用Echarts画曲线图的示例,帮助大家在vue中绘制图表,感兴趣的朋友可以了解下
    2020-10-10
  • vue通过v-html指令渲染的富文本无法修改样式的解决方案

    vue通过v-html指令渲染的富文本无法修改样式的解决方案

    这篇文章主要介绍了vue通过v-html指令渲染的富文本无法修改样式的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05

最新评论