当前位置：网站首页>art-template模板引擎过滤器的使用【入门简单使用篇】

art-template模板引擎过滤器的使用【入门简单使用篇】

2022-07-30 05:40:00 【星月前端】

1.注册过滤器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};

过滤器函数第一个参数接受目标值。

2.标准语法

{
  {date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

{ {value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./template-web.js"></script>
</head>

<body>

    <script id="temp" type="text/html">
        <div>我是名字叫{
   {name}}</div>
        <div>我今年{
   {age}}岁</div>
        <!-- 标准语法-过滤器 -->
        <h3>{
   {regTime | dateFormat}}</h3>
    </script>
    <script>
        // 定义一个dateFormat的过滤器，过滤时间
        template.defaults.imports.dateFormat = function(data) {
            console.log(data);
            var y = data.getFullYear()
            var m = data.getMonth() + 1
            var d = data.getDate()
            return y + '-' + m + '-' + d
        }

        var obj = {
            name: '星月',
            age: 22,
            regTime: new Date() //new一个时间
        }
        var res = template('temp', obj)
        document.write(res) //写到页面
    </script>

</body>

</html>

原网站

版权声明
本文为[星月前端]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_61950936/article/details/125202205

边栏推荐

猜你喜欢

随机推荐