返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS中art-template模板使用过滤器问题
  • 756
分享到

JS中art-template模板使用过滤器问题

2024-04-02 19:04:59 756人浏览 泡泡鱼
摘要

目录art-template模板使用过滤器举个栗子效果图art-template过滤器(单值,多值)art-template过滤器art-template模板使用过滤器 html有个

art-template模板使用过滤器

html有个特点:某些小数会变成无限小数。

比如1.05,可能显示为1.049999999999……

javascript中可以使用.toFixed(value);等方法,进行四舍五入处理,保留固定的小数位数。

但是,art-template模板进行渲染就不支持在模板中直接使用方法。

这时就需要用到art-template模板的过滤器。

语法:

    <!--HTML-->
    <script type="text/html" id="template">
        {{date|过滤器名称}}
    </script>
    template.defaults.imports.过滤器名称 = function(date){
        处理内容
        return 处理结果
    };

举个栗子

    <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已发起,请在24小时内集齐' + zan + '个赞,小组内完成集赞耗时最短者即可免单。'
        return word;
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: JS中art-template模板使用过滤器问题

本文链接: https://lsjlt.com/news/166824.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS中art-template模板使用过滤器问题
    目录art-template模板使用过滤器举个栗子效果图art-template过滤器(单值,多值)art-template过滤器art-template模板使用过滤器 html有个...
    99+
    2024-04-02
  • JS中的art-template模板如何使用if判断
    目录JS art-template模板使用if判断模板引擎art-template的基本使用一、输出数据二、if判断语句三、for循环语句四、子模板JS art-template模板...
    99+
    2024-04-02
  • 详解Django模板层过滤器和继承的问题
    过滤器 模板层对变量的操作实际还有很多,过滤器就是其中一种。学过Linux系统的一定知道管道操作符,其可以将上一步输出直接作为下一步输入进行处理,这里的过滤器就是类似管道符,其写法也...
    99+
    2024-04-02
  • Django 模板中常用的过滤器实现
    模版常用过滤器 在模版中,有时候需要对一些数据进行处理以后才能使用。一般在Python中我们是通过函数的形式来完成的。而在模版中,则是通过过滤器来实现的。过滤器使用的是|来使用。 ...
    99+
    2024-04-02
  • Django模板中怎么实现过滤器
    这篇文章主要介绍了Django模板中怎么实现过滤器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。模版常用过滤器在模版中,有时候需要对一些数据进行处理以后才能使用。一般在Pyt...
    99+
    2023-06-15
  • JS中filter( )数组过滤器的使用
    目录一、前言二、方法简介三、用法案例总结一、前言 数组过滤器是前端数据处理的一种常用方法,对于前端来说,后端返回的数据我们需要经过处理以后才能获取到自己想要的数据,进行进一步的操作。...
    99+
    2024-04-02
  • Django模板中如何实现常用的过滤器
    这篇文章主要介绍Django模板中如何实现常用的过滤器,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!模版常用过滤器在模版中,有时候需要对一些数据进行处理以后才能使用。一般在Python中我们是通过函数的形式来完成的。...
    99+
    2023-06-15
  • vue中使用过滤器filters的this为undefined的问题
    目录使用过滤器filters的this为undefinedvue filter过滤器的用法使用过滤器filters的this为undefined vue中的过滤器更偏向于对文本数据的...
    99+
    2024-04-02
  • Django零基础入门之自定义过滤器及模板中的使用
    目录引言自定义过滤器(1)首先(2)内置过滤器lower的使用:(3)自定义过滤器的使用:(4)模板中使用自定义过滤器:(5)效果展示:引言 分析Django内置的模板过滤器: 通...
    99+
    2024-04-02
  • JS中filter( )数组过滤器怎么用
    这篇文章给大家分享的是有关JS中filter( )数组过滤器怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、前言数组过滤器是前端数据处理的一种常用方法,对于前端来说,后端返回的数据我们需要经过处理以后才能...
    99+
    2023-06-25
  • 如何使用Filter过滤器中访问getSession()
    本篇内容介绍了“如何使用Filter过滤器中访问getSession()”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Filter过滤器中访...
    99+
    2023-06-26
  • Vue2.0中过滤器会出现什么问题
    这篇文章给大家分享的是有关Vue2.0中过滤器会出现什么问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。vue2.0里,不再有自带的过滤器,需要自己定义过滤器。定义的方法如下:...
    99+
    2024-04-02
  • 使用Filter过滤器中访问getSession()要转化
    目录Filter过滤器中访问getSession()要进行转化request.getSession()的问题1. 无参:request.getSession() 2. 有参...
    99+
    2024-04-02
  • win10系统使用键盘过滤驱动问题
    Win10系统的键盘过滤驱动问题可能是由以下几个方面引起的:1. 驱动问题:首先要确保键盘的驱动程序是最新的。可以去制造商的官方网站...
    99+
    2023-08-08
    win10
  • springboot中使用过滤器,jsoup过滤XSS脚本详解
    目录springboot使用过滤器,jsoup过滤XSS脚本1.把可能包含脚本的参数位置分析一下2.分析实现过程3.代码实现过程使用jsoup防止XSS攻击springboot使用过...
    99+
    2024-04-02
  • Vue.js中如何使用过滤器
    Vue.js中如何使用过滤器,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。过滤器是一个通过输入数据,能够及时对数据进行处理并返...
    99+
    2024-04-02
  • vue中过滤器如何使用
    这篇文章主要介绍“vue中过滤器如何使用”,在日常操作中,相信很多人在vue中过滤器如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中过滤器如何使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-06-29
  • Vue中过滤器怎么使用
    这篇文章主要讲解了“Vue中过滤器怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue中过滤器怎么使用”吧!过滤器其本质其实就是函数,作用在于用户输入数据用户,能够进行处理,并且返回...
    99+
    2023-06-03
  • Vue 中filters过滤器如何使用
    这篇文章给大家介绍Vue 中filters过滤器如何使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1、示例代码采用vue单文件组件,使用moment插件格式化日期<templ...
    99+
    2024-04-02
  • Vue中如何使用filters过滤器
    这篇文章主要为大家展示了“Vue中如何使用filters过滤器”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue中如何使用filters过滤器”这篇文章吧。Vue.js 允许我们自定义过滤器,...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作