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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
element的el-upload组件上传文件跨域问题的几种解决
跨域问题网上搜索很多,感觉情况都不一样,本文主要介绍了element的el-upload组件上传文件跨域问题的几种解决,具有一定的参考价值,感兴趣的可以了解一下2024-03-03vuex中store存储store.commit和store.dispatch的区别及说明
这篇文章主要介绍了vuex中store存储store.commit和store.dispatch的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09浅谈vue-cli加载不到dev-server.js的解决办法
本篇文章主要介绍了浅谈vue-cli加载不到dev-server.js的解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-11vue通过v-html指令渲染的富文本无法修改样式的解决方案
这篇文章主要介绍了vue通过v-html指令渲染的富文本无法修改样式的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-05-05
最新评论