欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 建筑 > 前端基础之《Vue(10)—过滤器》

前端基础之《Vue(10)—过滤器》

2025/5/15 23:21:42 来源:https://blog.csdn.net/csj50/article/details/147485062  浏览:    关键词:前端基础之《Vue(10)—过滤器》

一、过滤器

1、作用
用于数据处理。

2、全局过滤器
使用Vue.filter('名称', val=>{return newVal})定义。
在任何组件中都可以直接使用。

3、局部过滤器
使用选项,filters: {}定义,只能在当前组件中使用。

4、过滤器在Vue 3.0中已经淘汰了

5、过滤器只能用在{{}}和v-bind中,不支持其他指令

6、过滤器还可以链式调用{{num | f1 | f2}},过滤器是有顺序的

二、例子代码

<html>
<head><title>过滤器</title><style>[v-cloak] {display: none;}</style>
</head>
<body><div id="app"><h1 v-cloak>{{price | rmb}}</h1><h1 v-cloak>{{num | myfilter}}</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>Vue.filter('rmb', val=>{// 做任何复杂的处理return '¥' + Number(val).toFixed(2)})const app = new Vue({data() {return {price: 99.9,num: 202219}},filters: {myfilter(val) {return '学号' + val}}})app.$mount('#app')</script></body>
</html>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词