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-12vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue3從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