vue中的数据格式化filters、formatter方式
作者：小蒜瓣
这篇文章主要介绍了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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。