vue 过滤器filter实例详解

2024-07-29 04:21:12

vue的过滤器一般在JavaScript 表达式的尾部，由“|”符号指示：

过滤器可以让我们的代码更加优美，一般可以用在时间格式化，首字母大写等等。

例如：{{ date | dateFormat }}这是过滤器的写法；{{ dateFormat(date) }}这是函数调用的写法

可以看出过滤器的写法更加语义化，让人一眼可以看出它的含义。

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 也可以串联多个过滤器 -->
{{ message | filterA | filterB }}

// 在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中

<!-- 过滤器接收参数 -->
{{ message | capitalize('string', obj) }}

// 这里的参数将在过滤器函数内以第二个参数开始算起第一个参数为要过滤的值message，即'string'为第二个参数，obj为第三个参数。

过滤器方法在接收到参数后，你可以在方法内进行一系列的处理，最终return出处理结果即可。

1、过滤器可以是组件内的

filters: {
 capitalize: function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
}

2、过滤器也可以是挂载在全局Vue里

Vue.filter('capitalize', function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

总结

以上所述是小编给大家介绍的vue 过滤器filter实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

vue计算属性computed、事件、监听器watch的使用讲解

一.计算属性(computed) <template> <div class="box"> <h1>计算属性</h1> <hr>  <p><input type="text" v-model="message"></p> <!-- 对data的数据进行简单的操作这样有一个不好的地方就是后期对页面数据
在vue中使用公共过滤器filter的方法

平时我们在vue中使用过滤器时,在模板中定义的过滤器不能在其他模板中使用,所以要在每个模板中定义自己的filter,这样就会出现很多重复的代码,那有没有办法定义一个公用的filter,减少代码的重复呢? 下面就给大家展示下使用最多且有效的方法吧! •首先在公用js中定义一个通用的filter.js,如下图所示,记得一定要把代码整个export出来 const vFilter={ numFilter:function (value) { // 截取当前数据到小数点后两位 let realVal =
Vue 过滤器filters及基本用法

1.示例代码采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat
vue的过滤器filter实例详解

前记: 排版记录,点耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍: 某个filter.js // 限制汉字的个数 export const limitWordLength = Vue.filter('limitWordLength', (str, length, sufix) => { /* es
在Vue methods中调用filters里的过滤器实例

需求:vue中,除了在模板中使用过滤器,有时候,methods中也需要使用filters中的过滤器, 网友hongz1125提出的解决办法: this.$options.filters[filter](...args) //这种方法很简单,也很实用下面是我的方法,有点复杂.建议使用上面网友说的方法. filters: { formatScore(score) { if (score < 20) { score = '不合格'; } else if (score >= 20 &&
vue自定义filters过滤器

官方给出 Vue.filters(id , [definition]) //id {string} //definition {function} 详情查看在项目中我们如果有多个filters,那么我怎么一次注册,全局可用,我们在项目里新建一个filters文件夹,如下,index.js是出口文件,readMore是一个对字符串做处理的过滤器文件目录下面贴上代码: //index.js // 引入所有的过滤函数 import readMore from './readMore'; // 导
web前端vue filter 过滤器

vue的过滤器通常用在一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind 表达式. 比如给价格自动加上中文的钱的字符"￥"或者是给一个时间段或(时间戳)相互之间的转换过滤. 在javascript和jquery的年代!时间段的显示或者是提交,都是要在显示的时候要转换下或者提交的时候转换下,这样就有点繁琐了(个人用了vue后的感觉繁琐了). 不多说直接看例子如下: filter定义的过滤器可以局部,可以全局的下面就直接说全局的老样子还是等先注册一个全局的过滤器关
vue中过滤器filter的讲解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con
vue-router传参用法详解

一.动态路径参数以冒号开头(这种传参的方式会将传的值暴露在地址栏中:$route.params进行接收) 当to后面跟的是其他拼凑出来的值需要给t让to变为属性的方式传参即:to =' ' 效果: 二.get的方式进行传参(这种传参的方式相当于在地址栏?参数=值:$route.query进行接收) 效果: 若有不足请多多指教!希望给您带来帮助! 总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面
Vue filters过滤器的使用方法

本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下实例先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters

vue 过滤器filter实例详解

相关推荐

随机推荐