前端培训Vue之过滤器

1. 效果 (11_过滤器/test.html)
2. 理解过滤器
1) 功能: 对要显示的数据进行特定格式化后再显示 2) 注意: 并没有改变原本的数据, 可是产生新的对应的数据
3. 定义和使用过滤器
1) 定义过滤器 Vue.filter(filterName,function(value[,arg1,arg2,…]){ // 进行一定的数据处理 returnnewValue }) 2) 使用过滤器 <div>{{myData|filterName}}</div> <div>{{myData|filterName(arg)}}</div>
4. 编码
<div id=”test”> <p>当前时间为: {{currentTime}}</p>
<p>当前时间 1 为: {{currentTime | dateStr}}</p> <p>当前时间 2 为: {{currentTime | dateStr(‘YYYY-MM-DD’)}}</p> <p>当前时间 3 为: {{currentTime | dateStr(‘HH:mm:ss’)}}</p> </div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript” src=”https://cdn.bootcss.com/moment.js/2.19.0/moment.js”></script> <script> // 注 册 过 滤 器 Vue.filter(‘dateStr’, function (value, format) { return moment(value).format(format || ‘YYYY-MM-DD HH:mm:ss’) })
new Vue({ el: ‘#test’, data: { currentTime: new Date() } }) </script>
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
吉ICP备19006430号