[Vue]过滤器

已于 2022-10-10 00:43:48 修改
阅读量591 收藏
点赞数
分类专栏： Vue 学习笔记 文章标签： vue.js javascript 前端 前端框架 html
于 2022-10-10 00:38:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53022813/article/details/127236342
版权

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

1. 需要实现的案例效果

在这里插入图片描述

2. 时间格式化包

第三方包获取：BootCDN

2.1 moment.js

moment.js

Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。

moment.js中文文档

2.2 day.js

day.js

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样.

day.js的GitHub仓库(参考文档)

这里使用的是day.js

3. 计算属性与方法实现

3.1 计算属性实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>时间戳转换</h1>
    <h2>当前时间的时间戳：{{time}}</h2>
    <h2>当前时间：{{nowDateTime}}</h2>
  </div>
</body>
<!-- 导入day.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      // 当前时间的时间戳
      time: Date.now()
    },
    computed: {
      // 将时间戳转换指定格式的时间
      nowDateTime() {
        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
      }
    }
  })
</script>
</html>

在这里插入图片描述

3.2 方法实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>时间戳转换</h1>
    <h2>当前时间的时间戳：{{time}}</h2>
    <h2>当前时间：{{getDateTime()}}</h2>
  </div>
</body>
<!-- 导入day.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      // 当前时间的时间戳
      time: Date.now()
    },
    methods: {
      // 将时间戳转换指定格式的时间
      getDateTime() {
        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
      }
    },
  })
</script>
</html>

在这里插入图片描述

4. 过滤器

Vue3弃用

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本或数据的格式化。例如上述时间戳的格式化。

过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。

4.1 语法

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符 |”进行调用

过滤器的本质为函数

使用在插值表达式中：

{{需要格式化的数据 | 过滤器函数}}

4.2 过滤器实现时间戳的转换

在 filters 节点中定义过滤器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>时间戳转换</h1>
    <h2>当前时间的时间戳：{{time}}</h2>
    <!-- 通过管道符调用过滤器 -->
    <h2>当前时间：{{time | getDateTime}}</h2>
  </div>
</body>
<!-- 导入day.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      // 当前时间的时间戳
      time: Date.now()
    },
    filters: {
      // 将时间戳转换指定格式的时间
      getDateTime() {
        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
      }
    }
  })
</script>
</html>

在这里插入图片描述

4.3 过滤器的执行过程

在这里插入图片描述

4.4 向过滤器传递其他参数

现在要实现一个功能，在使用过滤器处理对应的数据时，可以传递参数来指定处理后的数据的格式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>时间戳转换</h1>
    <h2>当前时间的时间戳：{{time}}</h2>
    <!-- 通过管道符调用过滤器 -->
    <!-- 需要进行格式化处理的数据vue会默认进行传递，不需要我们主动传递 -->
    <!-- 我们传递的其他参数会在需要进行格式化处理的数据之后 -->
    <h2>当前时间：{{time | getDateTime('YYYY/MM/DD')}}</h2>
  </div>
</body>
<!-- 导入day.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      // 当前时间的时间戳
      time: Date.now()
    },
    filters: {
      // 将时间戳转换指定格式的时间
      // 第一个参数为需要进行格式化处理的数据
      // 第二个参数为指定的格式
      // 为了避免其他没有传递指定格式的调用，为formatStr设置默认值
      getDateTime(value, formatStr='YYYY-MM-DD HH:mm:ss') {
        return dayjs(value).format(formatStr);
      }
    }
  })
</script>
</html>

在这里插入图片描述

4.5 串联调用过滤器

串联调用过滤器，过滤器的执行顺序为从左到右，第一个调用的过滤器的参数为将要进行格式化处理的数据，此后每个过滤器的参数为前一个过滤器的返回结果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>时间戳转换</h1>
    <h2>当前时间的时间戳：{{time}}</h2>
    <h2>当前时间：{{time | getDateTime('YYYY/MM/DD') | mySlice}}</h2>
  </div>
</body>
<!-- 导入day.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      time: Date.now()
    },
    filters: {
      getDateTime(value, formatStr='YYYY-MM-DD HH:mm:ss') {
        return dayjs(value).format(formatStr);
      },
      // 截取前四个字符
      mySlice(value) {
        return value.slice(0, 4)
      }
    }
  })
</script>
</html>

在这里插入图片描述

4.6 定义全局过滤器

以上的过滤器都是定义在一个vue实例中，为局部过滤器。

定义全局过滤器的语法：

Vue.filter('过滤器名', 对应的处理函数)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>时间戳转换</h1>
    <h2>当前时间的时间戳：{{time}}</h2>
    <!-- mySlice为全局过滤器 -->
    <h2>当前时间：{{time | getDateTime('YYYY/MM/DD') | mySlice}}</h2>
  </div>

  <div id="root2">
    <h1>时间戳转换</h1>
    <h2>当前时间：{{time}}</h2>
    <!-- mySlice为全局过滤器 -->
    <h2>当前时间：{{time | mySlice}}</h2>
  </div>
</body>
<!-- 导入day.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  // 定义全局过滤器
  Vue.filter('mySlice', function(value) {
    return value.slice(0, 4)
  })

  const vm = new Vue({
    el: '#root',
    data: {
      time: Date.now()
    },
    filters: {
      // 局部过滤器
      // 属于vm
      getDateTime(value, formatStr='YYYY-MM-DD HH:mm:ss') {
        return dayjs(value).format(formatStr);
      }
    }
  })

  const vm2 = new Vue({
    el: '#root2',
    data: {
      time: '2022/10/10'
    }
  })
</script>
</html>

在这里插入图片描述

4.7 在v-bind中使用过滤器

语法：

v-bind:属性 = "xxx | 过滤器名"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>时间戳转换</h1>
    <h2>当前时间的时间戳：{{time}}</h2>
    <h2>当前时间：{{time | getDateTime('YYYY/MM/DD') | mySlice}}</h2>
    <p :x="time | getDateTime('YYYY/MM/DD') | mySlice"></p>
  </div>
</body>
<!-- 导入day.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  // 定义全局过滤器
  Vue.filter('mySlice', function(value) {
    return value.slice(0, 4)
  })

  const vm = new Vue({
    el: '#root',
    data: {
      time: Date.now()
    },
    filters: {
      // 局部过滤器
      // 属于vm
      getDateTime(value, formatStr='YYYY-MM-DD HH:mm:ss') {
        return dayjs(value).format(formatStr);
      }
    }
  })
</script>
</html>

在这里插入图片描述

5. 总结 过滤器

  • 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
  • 语法：
    • 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
    • 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
  • 备注：
    • 1.过滤器也可以接收额外参数、多个过滤器也可以串联
    • 2.并没有改变原本的数据, 是产生新的对应的数据
小炜1128
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中过滤器的使用
weixin_46376652的博客
07-10 544
Vue.filter(name,callback) 或 new Vue({ filter:{...} }){{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"使用管道符 | 进行分割，直接使用data中的数值，管道符后再接过滤器进行操作{{time | setTime}}：time是传入的时间参数，setTime是过滤器的名字，它会将time作为参数val传入到过滤器setTime(val)中，最后将return结果替换掉整个插值语法； 当调用的时候传入了参数，第一
vue 过滤器filter实例详解
10-18
Vue.js 的过滤器（Filter）是用于数据转换的一种强大工具，它允许我们在模板中对数据进行处理，以呈现更符合需求的显示效果。过滤器通常用于格式化数据，如日期格式化、字符串首字母大写等。Vue.js 提供了内置的过滤...
VUE模板语法 v-on v-bind v-html 过滤器filters
weixin_44853999的博客
10-17 410
<templayte> <div> <!-- v-on 是一个点击事件--> <div v-on:click="show">点击我</div> <!-- v-bind class属性red是一个变量 red的值在data中--> <div v-bind:class="red"></div&...
Vue2 v-bind:href 中如何使用过滤器
weixin_33856370的博客
03-08 584
<aclass="topic_title"v-bind:href="info.id|getTitleHref"v-bind:title="info.title">{{info.title}}</a> 下面是Vue的代码 var vm = new Vue({ el:'#topic_list', data:data, ...
Vue过滤器、多参数过滤器、过滤器demo
lienze.tech
12-06 427
前言 这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题 于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。 微信小程序搜索：Python面试宝典 或可关注原创个人博客：https://lienze.tech 也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习 过滤器 在vue属性中的fi
VUE参数和过滤器
张晨光老师的播客
01-03 690
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;参数&lt;/..
Vue 过滤器filters及基本用法
08-28
Vue 过滤器filters及基本用法 Vue 过滤器是 Vue.js 框架中的一种功能强大的工具，能够对数据进行格式化和处理。下面，我们将介绍 Vue 过滤器的实例代码和基本用法。 what is Vue 过滤器？ Vue 过滤器是一种函数，...
vue过滤器用法实例分析
12-29
本文实例讲述了vue过滤器用法。分享给大家供大家参考，具体如下： 过滤器: vue提供过滤器: capitalize uppercase currency…. {{msg|currency ￥}} debounce 配合事件，延迟执行 <input type=text @...
Vue-过滤器
qq_40792800的博客
01-17 443
数组过滤( filter )我们都不陌生，就是对数组的每一项做一些处理之后，返回一个新的数组。 那么Vue的 过滤器又是个啥玩意呢？ 我们现在有一个需求，就是将当前时间戳转为为正常时间展示出来，我们可以有很多种方法来实现 首先，引入 dayjs，这是一个类似于Moment.js de 处理时间和日期的 js库，但是更为轻量。 computed实现 <body> <div id='root'> <!-- 计算属性实现 --> <h2&g.
Vue基础——过滤器（有参+无参数）
qq_41929578的博客
10-05 383
vue中的过滤器分为两种：局部过滤器和全局过滤器 定义无参数全局过滤器（可定义多个） <div>{{msg | upper }}</div> Vue.filter('upper',function(val){ //将字符串的一个字符大写,slice从第一个字符之后截取 return val.charAt(0).toUpperCase()+val.slice(1); }); 定义无参数局部过滤器 <div>{{msg | upper1}}</
Vue之filters--v-bind
github_turboemily的博客
12-19 1748
Vue之filters–v-bind样式显示以及内容显示目前有一个列表，类似微博粉丝关注。 列表中有两种情况：已关注和关注，需要在加载页面时进行样式区分。html代码 <div id="vue"> <div v-for="item in list"> <p :class="item | filtersColor">{{item|filtersContent}}</p>
Vue2 --动态绑定class、过滤器参数、$ref、自定义指令、计算属性与监听器
weixin_51972964的博客
12-15 1100
v-bind动态绑定class <div :class='['default-class',{'active-class':isActive}]'> </div> <div :class='{'active-class':isActive}' data(){ return{ isActive:true } } 过滤器-filter参数 过滤器默认有一个实参,即管道符前面的数值,如果需要传参,则设多个形参,实参从第二个形参开始 <div>{{ text
Vue的数据绑定、过滤器
qq_46149597的博客
11-02 383
4、表达式,在双大括号括号标签中进行数据绑定，标签中可以是一个javascript的表达式，这个表达式可以是常量、变量、运算符组成的句子，仅可以是表达式，不能是一个语句。如下，串联使用过本地滤器，先调用firstText方法，在text字符串添加‘first’，再调用。3、属性样式绑定，双大括号不能应用在html属性中，如果要为html元素绑定属性，需要使用。需要一些复杂计算的数据绑定，简单的表达式可能无法实现，这时候需要使用过滤器。is等、可简化为 :href 、:class 的形式。
Vue----过滤器（filter）
cjx177187的博客
09-11 352
filter主要用于数据展示之前的处理过滤器只能用在v-bind或者插值表达式中。过滤器只能用在v-bind或者插值表达式中。过滤器只能用在v-bind或者插值表达式中。-- 过滤器用法 需要过滤的元素|过滤函数 -->-- 过滤器用法 需要过滤的元素|过滤函数 -->
Vue过滤器Filter的使用
自学前端开发
09-24 245
过滤器的作用: 他是可以从中取得你想要的，给哪个数据添加装饰，比如在一个价格前面给他一个￥的符号,把’Hello’变成’Hello World’,可以使用filter在后面添加World,或者把时间节点改成时间戳等. 过滤器可以在new vue实例注册全局的，也可以在组件中注册局部的 用法一: 全局过滤器: Vuefilter(''globalFilter,function(value){ return value + '$'; }) 局部注册: filters:{ componentFilte
vue(v-bind修改样式属性、自定义命令、过滤器filter)
m0_66970189的博客
06-23 1893
css代码 js代码 v-bind 使用格式 用于修改行内属性 格式： 简写：`:属性名=‘变量’ 注意： class操作类名 单独写一个变量名 只写一个的话，要写变量名 写数组 1. 数组里的数据加引号的话，就填入class名 2. 数组里面的数据不加引号，就填入变量名 对象形式，判断：后面是否为true ，如果是true就调用这个类名的设置的样式 v-for 补充 :key v-for中的key是用于确定当前循环的唯一性，尽量不适用index，一般有id就绑id 自定义指令 全局自定义命令
初学Vue（全家桶）-第n天（vue2）：关于v-bind=“$attrs“、v-bind=“$props“ 和v-on=“$listeners“的使用
lalala_dxf的博客
02-12 5687
可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。: 将调用组件时的组件标签上绑定的的属性(class和style除外)向下传递。在(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。：通过，将底层级的信息往高层级传递。
Vue中过滤器用法详解
最新发布
吃黄瓜不蘸酱的博客
06-09 499
Vue.js官方文档说明：可被用于一些常见的文本格式化。
vue实战之Filter传入多个参数
let us fly的博客
01-31 1875
vue实战之Filter传入多个参数
vue过滤器
05-30
Vue.js 的过滤器可以用来在模板中格式化显示数据。在模板中使用过滤器时，可以在要过滤的值后面加上“管道”符号（|），后面跟上过滤器名称，如下所示： ```html <!-- 在模板中使用过滤器 --> <p>{{ message | ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值