vue filters的使用

filters 过滤器：「Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：」

先说说我个人使用过后的总结

filters的使用常用的有两种局部和全局
美的很、感觉就是用的舒服，简单且功能强大

使用场景

处理显示的数据，比如：有后缀有前缀 5¥ 10¥ 时间戳转化正常时间等等…

方法一：局部使用

简单就是 在vue下和 methods对象平级定义一个filters对象用来处理过滤的数据，
然后直接在数据渲染的{{ }} 中放入就ok了，

 <el-table-column prop="endDate" label="考试结束时间" minWidth="100"><template slot-scope="scope">{{scope.row.endDate|ooooofs('yyyy.M.d hh:mm')}}// scope.row.endDate是第一个参数。‘yyyy.M.d hh:mm’是第二个参数//本来显示scope.row.endDate数据，//但进过filters过滤器后显示的是ooooofs返回的数据</template></el-table-column>filters: {ooooofs(val,style) {//val参数1 style参数二...数据处理return XXX  //返回数据}},methods:{...}

然后我们再来看过滤器参数传递规则，因该是噢原来是这样，就明白了

方法二：全局使用

 步骤：

编辑新建一个filters过滤器的方法放的js文件
main.js 全局引入
在任何vue文件中使用

1.编辑新建一个filters过滤器的方法放的js文件,我个人习惯是如下：

在src下新建plugin文件夹 ，再下面新建filters.js

filters.js 里面和平时写的方法一样，如下

main.js 全局引入

import * as filters from './plugin/filters.js'
Object.keys(filters).forEach(key=>{//插入过滤器名和对应方法Vue.filter(key,filters[key])
})
//引入就这么简单

3.使用，和上述局部一样

<el-table-column prop="timeLength" label="考试时长"><template slot-scope="scope">{{scope.row.endDate|timeLength(scope.row.startDate)}}</template>
</el-table-column>

其他filters使用方法还有挂载到vue.prototype 和全局混入mixins等使用方法，我不怎么用就不写了

官网介绍说明等更详细，还是以官网主

vue官网介绍：https://cn.vuejs.org/v2/guide/filters.html

vue filters的使用相关推荐

vue filters过滤器与字典项
vue filters过滤器与字典项功能介绍: 大致需求: 具体实现: 一.过滤器js文件: 二.引入并使用: 功能介绍: 在项目开发中,会遇到后台返回值为数字.字母等格式数据,具体显示则需根据字典 ...
使用 vue filters过滤器直接显示几分钟前几小时前几天前
这个没什么好多的直接上代码↓↓↓↓↓↓↓↓↓ filters:{dateFilter(ele){ //ele是之前记录的时间 var lr =new Date(ele); var now =ne ...
【Vue】vue先转化文章内容再去除标签 vue filters过滤器去除标签 js提取文字内容
问题描述渲染页面的时候,往往会遇到富文本编辑器里面的文章.文章内容有排版.字体样式,等等. 但是我们要提取其中前三行作为展示内容,里面又有标签内容.如下图原因分析: 如果我们要让页面自己识别其中的 ...
【土旦】在vue filters中优雅的使用对象的key、value来替换 if switch多重判断简化流程...
前言之前写过滤器的时候都是用 if switch 来进行值的判断返回对应的值, 在没去百度搜索之前都是都是这样写的 1 if (val == 1) { 2 return "支付成功&q ...
vue 过滤器 filters
<!-- 过滤器: 定义:对要显示的数据进行特定格式化之后再显示(使用与一些简单的逻辑)语法:1. 注册过滤器:Vue.filter.(name, callback) 或 new Vue{fil ...
vue 2.0 filter html,vue.filter使用方法是什么
vue.filter使用方法:对值进行筛选加工,代码为[ {{ msg }} v-bind]. vue.filter使用方法: 在Vue中filter过滤器是一个非常强大的功能. 个人觉得称它为加工车 ...
Vue教程3【使用Vue脚手架】render ref props minin scoped $emit $bus 消息订阅发布动画
npm全局安装切换淘宝npm镜像 npm config set registry https://registry.npm.taobao.org全局安装 npm install -g @vue/cl ...
初学者可能不知道的 vue.js技巧
技巧/坑点 1.setTimeout/ setInterval 场景一 :this指向改变无法用this访问vue实例 mounted(){setTimeout( function () {//set ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
vue(2)---computed,watch--2019.5.21学习笔记
computed:计算属性通过属性计算得来的属性 1.computed里面的函数建议由返回值,不建议去修改data中的属性 2.在使用computed中的方法时,是不需要加() 3.computed ...

vue filters的使用

先说说我个人使用过后的总结

使用场景

方法一：局部使用

方法二：全局使用

3.使用，和上述局部一样

其他filters使用方法还有挂载到vue.prototype 和全局混入mixins等使用方法，我不怎么用就不写了

vue filters的使用相关推荐

最新文章

热门文章

vue filters的使用

先说说我个人使用过后的总结

使用场景

方法一：局部使用

方法二：全局使用

3.使用 ，和上述局部一样

其他filters使用方法还有 挂载到vue.prototype 和 全局混入mixins等使用方法，我不怎么用就不写了

vue filters的使用相关推荐

最新文章

热门文章

3.使用，和上述局部一样

其他filters使用方法还有挂载到vue.prototype 和全局混入mixins等使用方法，我不怎么用就不写了