Avalon 学习系列（五）—— 过滤器

＊且听风吟

已于 2023-06-15 09:12:53 修改

阅读量514

点赞数

分类专栏： # Avalon 文章标签：学习 java python

于 2023-06-15 08:45:00 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/130563978

版权

Avalon 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Avalon 本身有很多过滤器，例如 date、number等文本过滤器、循环过滤器；avalon 也提供了方法可以根据需求自定义过滤器。

示例：

（1）定义一个 myFunc 的个性化过滤器，并加在元素上；

（2）使用 avalon 本身定义的过滤器。

如下：

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Avalon demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./avalon.js"></script>
  <script type="text/javascript">
    avalon.filters.myFunc = function () {
      return '这是一个自定义的过滤器'
    }
    var vm = avalon.define({  // wrap 用作该 Model的载体
      $id: "maincontainer",   // 告诉avalon这个Model是作用于哪个ms-controller的
      msg: "Hello,world!",   // 定义一个avalon对象属性“msg”，其值是“Hello,world!”
      time: 1482878745000
    });
    avalon.scan(); // 这句话可以加，也可以不加，因为avalon有自己的DOMReady模块，会自动扫描全文。
  </script>
  <style>
    .ms-controller {
      display: none;
    }
  </style>
</head>

<body>
  <div>
    <!-- 给div加上监听器 -->
    <div ms-controller="maincontainer">
      <p>{{msg | myFunc}}</p>
      <!-- 使用过滤器date，传入时间格式 -->
      <p>{{time|date('yyyy-MM-dd HH:mm:ss')}}</p>
    </div>
  </div>
</body>

</html>