vue中的数据格式化filters、formatter
一、filters过滤器函数可以使用在两个地方:1.双大括号表达式 {{ 文本字符串 | 过滤函数 }}2.v-bind:str= "文本字符串 | 过滤函数"以下实例为四舍五入,以及过滤器串联后11.11<template><div style="text-align:right;margin-bottom:10px">...
·
一、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>
更多推荐
已为社区贡献3条内容
所有评论(0)