vue中的數(shù)據(jù)格式化filters、formatter方式
更新時(shí)間:2024年07月18日 09:57:43 作者:小蒜瓣
這篇文章主要介紹了vue中的數(shù)據(jù)格式化filters、formatter方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue數(shù)據(jù)格式化filters、formatter
一、filters過(guò)濾器函數(shù)可以使用在兩個(gè)地方
- 1.雙大括號(hào)表達(dá)式 {{ 文本字符串 | 過(guò)濾函數(shù) }}
- 2.v-bind:str= "文本字符串 | 過(guò)濾函數(shù)"
以下實(shí)例為四舍五入,以及過(guò)濾器串聯(lián)后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>
<!-- 地址:上海市普陀區(qū)金沙江路 1518 弄 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
},
methods: {
formatter(row, column) {
return '地址:'+row.address;
}
}
}
</script>總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue2中使用axios http請(qǐng)求出現(xiàn)的問(wèn)題
下面小編就為大家分享一篇解決vue2中使用axios http請(qǐng)求出現(xiàn)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
快速解決 keep-alive 緩存組件中定時(shí)器干擾問(wèn)題
文章介紹了在使用keep-alive緩存組件時(shí),如何在組件被緩存后清理定時(shí)器以避免干擾其他組件的邏輯,通過(guò)在deactivated鉤子中清理定時(shí)器,可以確保組件被緩存時(shí)不會(huì)繼續(xù)運(yùn)行定時(shí)器,感興趣的朋友一起看看吧2025-02-02
詳解vue3?defineModel如何實(shí)現(xiàn)雙向綁定
隨著?Vue?3.3?引入的?defineModel?宏,開(kāi)發(fā)者可以更加簡(jiǎn)潔地實(shí)現(xiàn)組件內(nèi)部的雙向數(shù)據(jù)綁定,下面就跟隨小編一起來(lái)學(xué)習(xí)一下如何使用defineModel實(shí)現(xiàn)雙向綁定吧2024-12-12
vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Vue3從0搭建Monorepo項(xiàng)目組件庫(kù)
這篇文章主要為大家介紹了Vue3從0搭建Monorepo項(xiàng)目組件庫(kù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
關(guān)于Vite不能使用require問(wèn)題的解決方法
在vue2中我們通常會(huì)在模板中通過(guò)三目運(yùn)算符和require來(lái)實(shí)現(xiàn)動(dòng)態(tài)圖片,下面這篇文章主要給大家介紹了關(guān)于Vite不能使用require問(wèn)題的解決方法,需要的朋友可以參考下2022-10-10

