前端UI框架——VueAPI使用之过滤器

最新推荐文章于 2023-05-16 00:04:12 发布

Blockchain Explorer

最新推荐文章于 2023-05-16 00:04:12 发布

阅读量367

点赞数

分类专栏： Web框架/Vue/ 文章标签：过滤器 vue

本文链接：https://blog.csdn.net/TDCQZD/article/details/82155547

版权

Web框架/Vue/ 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue框架中的过滤器功能，包括其作为数据格式化工具的作用，以及如何定义和使用过滤器。通过代码示例，展示了过滤器在实际应用中的运行效果，帮助读者深入理解Vue的过滤器机制。

摘要由CSDN通过智能技术生成

一、基本介绍

1、理解过滤器
1) 功能: 对要显示的数据进行特定格式化后再显示
2) 注意: 并没有改变原本的数据, 可是产生新的对应的数据
2、定义和使用过滤器
1) 定义过滤器

  Vue.filter(filterName, function(value[,arg1,arg2,...]){
      // 进行一定的数据处理
      return newValue
    })

2) 使用过滤器

     <div>{{myData | filterName}}</div>
    <div>{{myData | filterName(arg)}}</div>

二、代码示例：

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_过滤器</title>
</head>
<body>
<div id="app">
    {{dateStr | dateFilter}}
</div>
</body>
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js"></script>
<script src="../js/vue.js"></script>
<script>
    Vue.filter("dateFilter", function(value){
        // return moment().format('MMMM Do YYYY, h:mm:ss a');
        // return moment().format('YYYY-MM-DD hh:mm:ss a');//24时
        return moment().format('YYYY-MM-DD HH:mm:ss a');
    })

    const vm = new Vue({
        el:"#app",
        data:{
            dateStr:new Date()
        }
    })

</script>
</html>