vue过滤器如何使用

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

作用：对内容(数据)进行过滤(二次操作/二次处理)

我给大家模拟一个场景

<body><div id="app"><li v-for="item of items"><span> 名称：{{item.name}} </span><span> - </span><span> 价格：{{rmb(item.price,'$')}} </span></li></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app = new Vue({el:"#app",data:{items:[{id:1,name:"iphone",price:"88888"},{id:2,name:"ipad",price:"66666"},{id:3,name:"iMac",price:"199999"}]},methods:{rmb(price,flag){return `${flag}` + (price / 100).toFixed(2);}}})</script>
</body>

浏览器反馈

上边是一个没有使用过滤器的，我们先再看一下使用过滤器的

<body><div id="app"><li v-for="item of items"><span> 名称：{{item.name}} </span><span> - </span><span> 价格：{{item.price | rmb("$")}} </span></li></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>// Vue.filter("过滤器名称",过滤的方式)Vue.filter("rmb", function(price, flag){return `${flag}` + (price / 100).toFixed(2);})let app = new Vue({el: "#app",data: {items: [{ id: 1, name: "iphone", price: "88888" },{ id: 2, name: "ipad", price: "66666" },{ id: 3, name: "iMac", price: "199999" }]}})</script>
</body>

我们可以看出，页面效果是完全一样的

过滤器的使用：很类似于管道流

管道流：获取到的第一个值，以参数（第一位）的形式传递给第二个

<span> 价格：{{item.price | rmb("$")}} </span>

是否使用过滤器：
取决于你是否需要多次使用，如果说，如果只是为了单纯的实现上述效果，没有后期需求，那上述两种方法的使用都可以，但是如果后期需求较多，那过滤器的优势就体现出来了

r4(r3(r2(r1(ppt,1),2),3),4)  // 多次使用函数
r4(4) | r3(3) | r2(2) | r1(1) // 多次使用过滤器

vue过滤器如何使用相关推荐

vue 过滤器的使用（解决forEach遇到的问题）
vue 过滤器的使用(解决forEach遇到的问题) 参考文章: (1)vue 过滤器的使用(解决forEach遇到的问题) (2)https://www.cnblogs.com/hellosxs/p ...
vue 过滤器格式时间秒数，js 时间日期格式化
vue过滤器将总秒数转化为 00:00:00 Vue.filter('filterTime',function (value) {let t;if(value > -1){let hour = ...
Vue过滤器的简单使用--实时显示格式化的时间
Vue的过滤器的使用是在{{}}插值的尾部添加一个管道符 | 过滤的规则是自己定义的,通过给Vue实例添加选项filters来设置通过过滤器对时间进行格式化从而实时显示时间 <!doctyp ...
web前端技巧分享：vue过滤器的那点事！
关于vue的过滤器,其实在vue1.0的时候是内置了过滤器的,但是自从到了2.0之后就被去掉了,但是我们可能还会使用到,所以就需要自己定义过滤器了,下面小千就带你了解一下如何定义过滤器和过滤器都有哪些 ...
带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
vue过滤器的那点事
关于vue的过滤器,其实在vue1.0的时候是内置了过滤器的,但是自从到了2.0之后就被去掉了,但是我们可能还会使用到,所以就需要自己定义过滤器了,下面小千就带你了解一下如何定义过滤器和过滤器都有哪些 ...
vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
vue 过滤器做字数限制并显示省略号
//vue 过滤器做字数限制并显示省略号{{value | ellipsis(15)}} Vue.filter('ellipsis', (value, num) => {const nums = ...
Vue过滤器：第二天
Vue过滤器简介 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器分为全局过滤器和私有过滤器. 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0 ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...

vue过滤器如何使用

vue过滤器如何使用相关推荐

最新文章

热门文章