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>