1. <body>
    2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    3.     <div id='myApp'>
    4.         <div>有一些数据直接渲染不符合要求: {{time}}</div>
    5.         <div>1, 可以使用内置函数处理数据: {{time.toLocaleString()}}</div>
    6.         <div>2, 可以调用自定义函数处理数据: {{timeFormat(time)}} </div>
    7.         <div>3, 可以使用vue过滤器处理数据: {{time | timeFilter1}}</div>
    8.         <h3>过滤器函数和普通函数的区别: </h3>
    9.         <ol>
    10.             <li>过滤器函数定义在filters字段中,普通函数定义在methods字段中</li>
    11.             <li>普通函数直接调用, 过滤器掉用: { {数据 | 过滤器} }</li>
    12.             <li>过滤器可以连续调用, {{time | timeFilter1 | timeFilter2}}</li>
    13.             <li>过滤器调用时不需要传参, 参数默认是|前的值, 如果加参数, 这个参数会传入第二个形参处{{time | timeFilter1("郑州")}}</li>
    14.         </ol>
    15.     </div>
    16.     <script>
    17.         new Vue({
    18.             el: '#myApp',
    19.             data: {
    20.                 time: new Date()
    21.             },
    22.             // filters 字段用于定义过滤器, 里边放一些函数,用于数据处理
    23.             filters:{
    24.                 timeFilter1(time, city){
    25.                     console.log(city)
    26.                     return `${time.getFullYear()}年 ${time.getMonth()+1}月 ${time.getDate()}日`
    27.                 },
    28.                 timeFilter2(time){
    29.                     return "北京时间: " + time
    30.                 }
    31.             },
    32.             methods: {
    33.                 timeFormat(time){
    34.                     return `${time.getFullYear()}年 ${time.getMonth()+1}月 ${time.getDate()}日`
    35.                 }
    36.             }
    37.         })
    38.     </script>
    39. </body>