Vue系列十一：过滤器

本是古典何须时尚 2022-01-30 06:21 217阅读 0赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 过滤器

vue 过滤器 1 关于 vue 过滤器 > 在vue1.0的时候其实是内置了过滤器的，但是考虑到好多过滤器并不一定会被开发所调用，所以把原本内置的过滤器就给去掉了

妖狐艹你老母/ 2022年11月26日 08:43/ 0 赞/ 221 阅读

相关 vue：过滤器

一、过滤器过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器

亦凉/ 2022年03月27日 07:26/ 0 赞/ 333 阅读

相关 Vue系列二十一：源码解析

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

你的名字/ 2022年01月30日 11:31/ 0 赞/ 263 阅读

相关 Vue系列十六：vue组件

一、组件由三个部分组成 1、模板页面 <template> </template> 2、 JS 模块对象 <script>

电玩女神/ 2022年01月30日 06:51/ 0 赞/ 296 阅读

相关 Vue系列十四：创建vue项目

一、说明 1. vue-cli 是 vue 官方提供的脚手架工具 2. github:[https://github.com/vuejs/vue-cli][https_g

我会带着你远行/ 2022年01月30日 06:36/ 0 赞/ 289 阅读

相关 Vue系列十二：指令

一、内置指令 v:text : 更新元素的 textContent v-html : 更新元素的 innerHTML v-if : 如果为true, 当前标签

痛定思痛。/ 2022年01月30日 06:23/ 0 赞/ 256 阅读

相关 Vue系列十一：过滤器

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

本是古典何须时尚/ 2022年01月30日 06:21/ 0 赞/ 218 阅读

相关 Vue过滤器

在了解过滤器之前，我们需要明确一个概念--过滤器，本质上都是函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。Vue.js与AngularJS中的过滤器语法有

比眉伴天荒/ 2021年12月22日 11:17/ 0 赞/ 447 阅读

相关 JavaWeb基础系列（十二）过滤器

一、过滤器简介 filter是对客户端访问资源的过滤，符合条件放行，不符合条件不放行，并且可以对目标资源访问前后进行逻辑处理。二、过滤器快速入门实现步骤：

「爱情、让人受尽委屈。」/ 2021年09月27日 00:38/ 0 赞/ 361 阅读

相关 vue过滤器

过滤数据是我们日常开发中必然会用到的。常见的场景：当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写，等等。

╰+攻爆jí腚メ/ 2021年08月28日 11:52/ 0 赞/ 530 阅读