JS中art-template模板使用過濾器問題
更新時間：2022年09月05日 11:15:04 作者：Shawyu_
這篇文章主要介紹了JS中art-template模板使用過濾器問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
art-template模板使用過濾器
html有個特點：某些小數(shù)會變成無限小數(shù)。
比如1.05，可能顯示為1.049999999999……
在javascript中可以使用.toFixed(value);等方法，進行四舍五入處理，保留固定的小數(shù)位數(shù)。
但是，art-template模板進行渲染就不支持在模板中直接使用方法。
這時就需要用到art-template模板的過濾器。
語法：
?? ?<!--HTML-->
?? ?<script type="text/html" id="template">
?? ??? ?{{date|過濾器名稱}}
?? ?</script>?? ?template.defaults.imports.過濾器名稱 = function(date){
?? ? ? ?處理內(nèi)容
?? ? ? ?return 處理結(jié)果
?? ?};舉個栗子
?? ?<div class="box"></div>
?? ?<script type="text/html" id="template">
?? ??? ?<div class="total-price">
?? ??? ??? ?{{list.unit-price*list.num|format}} 元
?? ??? ?</div>
?? ?</script>?? ?render(data){
?? ??? ?// art-template過濾器
?? ??? ?template.defaults.imports.format = function(n){
?? ??? ??? ?return n.toFixed(2);
?? ??? ?};
?? ??? ?// art-template模板渲染
?? ??? ?$(".box").html(template('template',{list:data}));
?? ?}效果圖
原本：
使用過濾器：
需要注意的是過濾器必須有一個返回值。
并且過濾器還有其他寫法。
art-template過濾器（單值，多值）
art-template過濾器
鏈接: 官方文檔-過濾器語法
過濾器處理一個值
HTML：<p>共有{{popWindow_val.freeFriend | friendNum}}位好友</p>JS: template.defaults.imports.friendNum = function (value) {
? ? var length = value.length;
? ? return length;?
}過濾器處理兩個值
HTML：{{$imports.pkWord(pkList_val.freeTeam,pkList_val.zan)}}JS:template.defaults.imports.pkWord = function (value,zan) {
? ? ? ? for (var i = 0, len = value.length; i < len; i++) {
? ? ? ? ? ? if (value[i].status == 2 || value[i].status == 3) {
? ? ? ? ? ? ? ? return "小組中已有人集齊點贊，趕緊分享好友，完成時間最短即可免單。";
? ? ? ? ? ? }
? ? ? ? } ??
? ? ? ? var word = 'PK已發(fā)起，請在24小時內(nèi)集齊' + zan + '個贊，小組內(nèi)完成集贊耗時最短者即可免單。'
? ? ? ? return word;
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JS for循環(huán)中i++ 和 ++i的區(qū)別介紹
這篇文章主要介紹了JS for循環(huán)中i++ 和 ++i的區(qū)別介紹的相關(guān)資料,需要的朋友可以參考下2016-07-07
常用的改變鼠標樣式的方法：如果你想鼠標移動到某個元素上改變鼠標樣式 就在這個元素的樣式里加上 cursor:(你想改的樣式)2014-03-03
這篇文章主要為大家詳細介紹了微信小程序wxs實現(xiàn)吸頂效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
在 JavaScript 中,處理浮點數(shù)時經(jīng)常會遇到精度丟失的問題,這是由于 JavaScript 內(nèi)部采用 IEEE 754 標準表示浮點數(shù),導(dǎo)致某些小數(shù)無法精確表示,本文將介紹一些常見的方法來解決 JavaScript 中的精度問題,并討論它們的優(yōu)缺點,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了前端實現(xiàn)截屏的兩種常見方式,分別是使用第三方庫html2canvas和navigator.mediaDevices.getDisplayMedia,兩種方法都給出了詳細的代碼示例,需要的朋友可以參考下2025-03-03
前端uniapp封裝網(wǎng)絡(luò)請求以及實際應(yīng)用教程
這篇文章主要給大家介紹了關(guān)于前端uniapp封裝網(wǎng)絡(luò)請求以及實際應(yīng)用的相關(guān)資料,在uniapp中進行網(wǎng)絡(luò)測試請求可以通過封裝網(wǎng)絡(luò)請求來實現(xiàn),文中給出了詳細的代碼實例,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了原生javascript實現(xiàn)圖片輪播切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了原生JS與jQuery編寫簡單選項卡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
js實現(xiàn)input框文字動態(tài)變換顯示效果
這篇文章主要介紹了js實現(xiàn)input框文字動態(tài)變換顯示效果,涉及javascript隨機字符串與中文的動態(tài)切換顯示效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JS構(gòu)建頁面的DOM節(jié)點結(jié)構(gòu)的實現(xiàn)代碼
本來想用json格式的，可是要么有重復(fù)，要么得嵌套，所以改用對象嵌套數(shù)組2011-12-12