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過濾器函數(shù)可以使用在兩個(gè)地方
- 1.雙大括號(hào)表達(dá)式 {{ 文本字符串 | 過濾函數(shù) }}
- 2.v-bind:str= "文本字符串 | 過濾函數(shù)"
以下實(shí)例為四舍五入,以及過濾器串聯(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)文章
Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級(jí)版,提供了更多的表單控件和功能,同時(shí)還改進(jìn)了一些細(xì)節(jié)和樣式,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-04-04
Vue3中解決組件間css層級(jí)問題的最佳實(shí)踐
<Teleport> 是 Vue 3 中引入的一個(gè)內(nèi)置組件,用于將組件的內(nèi)容渲染到 DOM 中的指定位置,而不受組件層級(jí)結(jié)構(gòu)的限制,本文給大家介紹了Vue3使用Teleport解決組件間css層級(jí)問題的最佳實(shí)踐,需要的朋友可以參考下2025-02-02
vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式
這篇文章主要介紹了vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Element-Plus Select組件實(shí)現(xiàn)滾動(dòng)分頁加載功能
Element-Plus的select組件并沒有自帶滾動(dòng)分頁加載的功能,其雖然提供了自定義下拉菜單的底部的方式可以自定義上一頁及下一頁操作按鈕的方式進(jìn)行分頁加載切換,這篇文章主要介紹了Element-Plus Select組件實(shí)現(xiàn)滾動(dòng)分頁加載功能,需要的朋友可以參考下2024-03-03
Vue通過路由實(shí)現(xiàn)頁面間參數(shù)的傳遞
這篇文章主要介紹了Vue通過路由實(shí)現(xiàn)頁面間參數(shù)的傳遞,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
使用vue實(shí)現(xiàn)一個(gè)電子簽名組件的示例代碼
這篇文章主要介紹了使用vue實(shí)現(xiàn)一個(gè)電子簽名組件的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue預(yù)覽圖片和視頻的幾種實(shí)現(xiàn)方式
本文主要介紹了Vue預(yù)覽圖片和視頻的幾種實(shí)現(xiàn)方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07

