微信扫一扫打赏支持

VUE参考---过滤器

VUE参考---过滤器

一、总结

一句话总结：

基本过滤器使用：值 | 过滤器：<p>{{time | dateString}}</p>
过滤器带参数：过滤器后小括号接要带的参数：<p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
<div id="test">
  <h2>显示格式化的日期时间</h2>
  <p>{{time}}</p>
  <p>最完整的: {{time | dateString}}</p>
  <p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>

  // 定义过滤器
  Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {

    return moment(value).format(format);
  })

 

 

1、过滤器基本使用？

基本过滤器使用：值 | 过滤器：<p>{{time | dateString}}</p>
<div id="test">
  <h2>显示格式化的日期时间</h2>
  <p>{{time}}</p>
  <p>最完整的: {{time | dateString}}</p>
  <p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>

  // 定义过滤器
  Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {

    return moment(value).format(format);
  })

 

 

2、过滤器带参数？

过滤器带参数：过滤器后小括号接要带的参数：<p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
<div id="test">
  <h2>显示格式化的日期时间</h2>
  <p>{{time}}</p>
  <p>最完整的: {{time | dateString}}</p>
  <p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>

  // 定义过滤器
  Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {

    return moment(value).format(format);
  })

 

 

 

二、过滤器

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>11_过滤器</title>
 6 </head>
 7 <body>
 8 <!--
 9 1. 理解过滤器
10   功能: 对要显示的数据进行特定格式化后再显示
11   注意: 并没有改变原本的数据, 可是产生新的对应的数据
12 2. 编码
13   1). 定义过滤器
14     Vue.filter(filterName, function(value[,arg1,arg2,...]){
15       // 进行一定的数据处理
16       return newValue
17     })
18   2). 使用过滤器
19     <div>{{myData | filterName}}</div>
20     <div>{{myData | filterName(arg)}}</div>
21 -->
22 <!--需求: 对当前时间进行指定格式显示-->
23 <div id="test">
24   <h2>显示格式化的日期时间</h2>
25   <p>{{time}}</p>
26   <p>最完整的: {{time | dateString}}</p>
27   <p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
28 </div>
29 
30 <script type="text/javascript" src="../js/vue.js"></script>
31 <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
32 <script>
33   // 定义过滤器
34   Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
35 
36     return moment(value).format(format);
37   })
38 
39 
40   new Vue({
41     el: '#test',
42     data: {
43       time: new Date()
44     },
45     mounted () {
46       setInterval(() => {
47         this.time = new Date()
48       }, 1000)
49     }
50   })
51 </script>
52 </body>
53 </html>

 

 

 

 
posted @ 2020-04-21 13:28  范仁义  阅读(121)  评论(0)    收藏  举报