您的位置：首页 > Web前端 > Vue.js

Vue系列十一：过滤器

2019-05-18 13:45 225 查看
  1. 理解过滤器
    功能: 对要显示的数据进行特定格式化后再显示
    注意: 并没有改变原本的数据, 可是产生新的对应的数据
  2. 编码
    1). 定义过滤器
    Vue.filter(filterName, function(value[,arg1,arg2,…]){
     // 进行一定的数据处理
     return newValue
    })
    2). 使用过滤器 {{myData | filterName}} {{myData | filterName(arg)}} 
<body>
<!--需求: 对当前时间进行指定格式显示-->
<div id="test">
<h2>显示格式化的日期时间</h2>
<p>{{time}}</p>
<p>最完整的: {{time | dateString}}</p>
<p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
// 定义过滤器
Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {

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

new Vue({
el: '#test',
data: {
time: new Date()
},
mounted () {
setInterval(() => {
this.time = new Date()
}, 1000)
}
})
</script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航