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