Avalon Learning Series (5) - Filter

AvalonThere are many filters in itself, such as date、numbertext filters and loop filters; avalonmethods are also provided to customize filters according to needs.

Example:

(1) Define a myFuncpersonalized filter and add it to the element;

(2) Use avalonthe filter defined by itself.

as follows:

<!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>

Page effect:
insert image description here

Guess you like

Origin blog.csdn.net/HH18700418030/article/details/130563978