vue.js 过滤器

vue的过滤器可以用来对数据进行格式化

1.过滤器注册

过滤器注册分为全局注册和局部注册
(1)全局注册:所有的组件中都能使用
语法:Vue.filter(过滤器名称,回调函数)
回调函数的参数就是需要过滤处理的数据

//入口文件 main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.filter('toUpperCase',function(val){
  return val.toUpperCase()
})

(2)局部注册:只能在该组件中使用
在组件中添加filters属性,他的值是一个对象。key就是过滤器名称,他的值为回调函数。

<script>
import Child from "./components/Child.vue"
import Child2 from "./components/Child2.vue"

export default {
  data() {
    return {
      msg:"good day"
    }
  },
  filters:{
    toUSD:function(val){
      return "$" + val
    }
  }
}
</script>

2.过滤器的调用

语法: data | 过滤器名称
过滤器支持串联: data | 过滤器1 | 过滤器2

<template>
<div id="app">
    <p>{{msg}}</p>
    <!-- 使用全局注册的过滤器 -->
    <p>转换为大写 -- {{msg | toUpperCase}}</p>
    <!-- 使用局部注册的过滤器 -->
    <p>添加$前缀 -- {{msg | toUSD}}</p>
    <!-- 过滤器串联 -->
    <p>过滤器串联 -- {{msg | toUpperCase | toUSD}}</p>
</div>
</template>

PS:过滤器除了可以在{{}}中使用外,还可以在v-bind/v-html中使用

3.实例 格式化时间日期

使用第三方插件moment.js来对日期进行格式化
引入插件

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>

使用npm

npm install moment --save
//引入moment
import moment from 'moment'

基本使用:

//注册全局过滤器
import Vue from 'vue'
import moment from 'moment'

Vue.filter('dateFormat',function(val){
  //引入moment后就可以使用moment这个对象,它本身也是一个函数
  return moment(val).format();
})
//App组件  date = new Date()
<template>
<div id="app">
    <!-- 原始格式: -->
    <p>{{date}}</p>
    <!-- 使用moment过滤: -->
    <p>{{date | dateFormat}}</p>
</div>
</template>

渲染结果:

Fri Nov 08 2019 23:15:02 GMT+0800 (中国标准时间)
2019-11-08T23:15:02+08:00

过滤器函数还可以接收自定义的参数
moment的format函数可以根据传入的参数来控制数据输出的格式,详见
http://momentjs.cn/

Vue.filter('dateFormat',function(value,format){
    return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss');
})

使用实例

<div id="app">
    <p>原始格式:{{date}}</p>
    <p>默认格式:{{date | dateFormat}}</p>
    <p>只显示年月日:{{date | dateFormat('YYYY-MM-DD')}}</p>
    <p>只显示时分秒:{{date | dateFormat('HH:mm:ss')}}</p>
</div>

渲染结果:

原始格式:Sat Jul 06 2019 11:47:46 GMT+0800 (中国标准时间)
默认格式:2019-07-06 11:47:46
只显示年月日:2019-07-06
只显示时分秒:11:47:46

原文地址:https://www.cnblogs.com/OrochiZ-/p/11823850.html

时间: 2024-10-08 01:24:42

vue.js 过滤器的相关文章

vue.js基础知识篇(4):过滤器、class与style的绑定2

代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做字符串处理,不带引号的参数被当做数据属性名处理. {{message | filterFunction "arg1" arg2 }} vue.js支持在任何出现表达式的地方添加过滤器. vue.js支持链式调用,上一个过滤器的输出结果作为下一个过滤器的输入.类似于Linux shell的管

Vue.js 自定义过滤器

过滤器,本质上就是一个函数.其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果. Vue.js 与 AngularJS 中的过滤器语法有些相似,使用管道符(|)进行连接,代码示例如下: {{'abc' | uppercase}}    'abc' => 'ABC' 这里使用了Vue.js 内置的过滤器 uppercase,将字符串中的字母全部转换成大写形式. Vue.js 支持在任何出现表达式的地方添加过滤器,除了上面例子中的 双大括号 表达式之外,还可以在绑定指令的表达式后调用,代码

vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 2.实例用法 2.1-1浅度监听:当点击页面,弹出发生变化了,a的值变为1,b的值变为101 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue.js(12)--过滤器

vue中的全局过滤器与定义私有过滤器 全局过滤器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

遇见Vue.js

总之岁月漫长,然而值得等待.... MVC.MVP.MVVM简述 mvc模式:model(模型).view(视图).controller(控制器) => view一般通过controller和model进行联系,controller是model和view的协调者,view和model不直接联系.基本联系都是单向的. mvc模式:model(模型).view(视图).presenter(逻辑层) => presenter完全把view和model进行了分离,主要逻辑在presenter离实现,p

Vue.js小案例(2)

即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] { display: none; } *{ margin:0; padding:0; } body{ font-family:Microsoft YaHei; text-align:center; } li{ list-style:none; } .bar{ background-color:#5

Vue.js——60分钟组件快速入门(下篇)

概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开通了一个驿站,你把东西放到驿站我就可以拿到了." 今天我们将着重介绍slot和父子组件之间的访问和通信,slot是一个非常有用的东西,它相当于一个内容插槽,它是我们重用组件的基础.Vue的事件系统独立于原生的DOM事件,它用于组件之间的通信. 本文的主要内容如下: 组件的编译作用域 在组件templ

Vue.js——60分钟组件快速入门(上篇)

组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!(所有示例都放在GitHub Pages上了,请访问https://github.com/keepfool/vue-tut

Vue.js学习笔记(1)

数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时 将input 框里面的值清空时: 重新给  input 框输入  豆豆 后页面中  span  里绑定{{testData.name}}的值随着 input 框值的变化而变化. 在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定.并且v-model指令只能用于:<input>.<select>.<textarea>这三种标签. <template> <div&