您现在的位置是:首页 > Javascript
当前栏目
Vue前端的过滤器
2023-04-18 16:08:19 时间
有时候我们想要对后台传过来的数据做一些处理,这就需要过滤器了(也可以自定义方法,不过用过滤器更更方便). 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
关于过滤器的声明位置: 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)
})
new Vue({
// ...
})
注意: 1.当全局过滤器和局部过滤器重名时,会采用局部过滤器。 2.过滤器可以串联,
{{ message | filterA | filterB }}
,处理结果以此往后背过滤处理 3.过滤器是 JavaScript 函数,因此可以接收参数:{{ message | filterA('arg1', arg2) }},这里message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。
过滤器和计算属性功能非常类似,关于他俩的区别如下:
计算属性 | 过滤器 |
---|---|
依赖于一个固定的vue实例 ,在某一个实例中使用 | 不依赖于实例。可以定义一个全局过滤器,在多个实例中使用 |
不接受额外参数,依赖于data属性中的变量 | 不要求是data中的变量,可以是临时变量。可接受额外参数。 |
有缓存管理机制,可减少页面调用次数 | 无缓存机制,调用次数,取决于页面中有所多少过滤器 |
计算属性虽默认为只读,但可以定义为对象,开启可读可写模式 | 只能读取操作 |
计算属性被作为一个类属性调用 | 过滤器被作为一个特殊方法处理 |
相同点:
都必须有返回值
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营