Vue.js过滤器(filter)的使用
晚意延年
帮助1人
一、过滤器作用
vue.js过滤器是在数据显示之前进行处理和筛选。
二、过滤器的使用
1.使用位置 ：{{ }}插值语法 和 v-bind 指令。
2.语法 ：{{ data | filter1(参数) | fliter2(参数) }}，过滤器应该被添加在JavaScript 表达式的尾部，由 ' | ' 指示。
三、vue内置过滤器
vue1.0中有许多内置过滤器，例如currency、uppercase、lowercase；vue2.0已经删除了所有内置过滤器，那么想要使用过滤器怎么办？
1.使用第三方工具库
如：date-fns库(日期格式化)、moment.js(对时间过滤)
2.自定义过滤器
四、自定义过滤器
1.分类：
全局过滤器、局部过滤器
2.全局过滤器
语法：使用全局方法Vue.fliter( "filterName"，function(data，参数1，参数2 ... ){ ... } )，过滤器写在Vue实例外。data是固定参数，是要进行过滤处理的数据(下同)。
3.局部过滤器
语法：使用全局方法fliters:{ "filterName" ：(data,参数1，参数2 ... ) => { ... } }，过滤器写在Vue实例里面。
五、实例代码
-
<body>
-
<div id="app">
-
<!-- 将小于10的数字十位补0 -->
-
<h3>{{8 | addZero}}</h3> //08
-
<!-- 将数字保留3位小数 -->
-
<h3>{{12.3456789 | number(3)}}</h3> //12.345
-
<!-- 将时间戳显示成年月日时分秒 -->
-
<h3>{{currentTime | time}}</h3> //2022-3-14 17:47:25
-
</div>
-
-
<script>
-
//自定义全局过滤器(在Vue实例外)
-
Vue.filter('addZero',function(data){ //data为固定参数
-
return data < 10 ? '0' data : data; //如果data小于10，给十位补0，否则返回data
-
});
-
//自定义全局过滤器
-
Vue.filter('time',data=>{
-
return d.getFullYear() '-' (d.getMonth() 1) '-' d.getDate() '' d.getHours() ':'
-
d.getMinutes() ':' d.getSeconds();
-
});
-
-
new Vue({
-
el:"#app",
-
data:{
-
currentTime:Date.now(),
-
},
-
//自定义局部过滤器(Vue实例的一个配置)
-
filters:{
-
number(data,n){ //data为固定参数，n为形参
-
return data.toFixed(n);
-
}
-
}
-
});
-
</script>
-
</body>
六、注意
1、 当有局部和全局两个名称相同的过滤器时,会遵循就近原则，即：优先使用局部过滤器
2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开，其执行顺序从左往右。
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhggcfgc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
