vue属性过滤器filter

一. 过滤器filter作用

作用是转换格式, 把变量或者表达式转换出来

Vue中的过滤器场景

全局定义字母都大写的过滤器

字母转大写, 输入"hello", 输出"HELLO"

局部定义字符串翻转的过滤器

字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"

二. 过滤器filter语法:

全局注册的语法:

Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})

局部注册的语法:

filters: {过滤器名字: (值) => {return “返回处理后的值”}

在插值表达式中使用过滤器语法
{{ 表达式 | 过滤器}}

例子:

<template><div><p>原来的样子: {{ msg }}</p><!-- 2. 过滤器使用语法: {{ 值 | 过滤器名字 }}--><p>使用翻转过滤器: {{ msg | reverse }}</p><p :title="msg | toUp">鼠标长停</p></div>
</template><script>
export default {data(){return {msg: 'Hello, Vue'}},// 方式2: 局部 - 过滤器// 只能在当前vue文件内使用/*语法: filters: {过滤器名字 (val) {return 处理后的值}}*/filters: {toUp (val) {return val.toUpperCase()}}
}
</script><style></style>

总结: 把值转成另一种形式, 使用过滤器, Vue3用函数替代了过滤器.
全局注册最好在main.js中注册, 一处注册到处使用

三. 过滤器filter传参和多个过滤器

目标: 可同时使用多个过滤器, 或者给过滤器传参

语法:

过滤器传参: vue变量 | 过滤器(实参)

加参数: {{表达式 | 过滤器(声明参数)}}
多个过滤器: vue变量 | 过滤器1 | 过滤器2

{{ 表达式 | 过滤器1| 过滤器2}}

例子

<template><div><p>原来的样子: {{ msg }}</p><!-- 1.给过滤器传值语法: vue变量 | 过滤器名(值)--><p>使用翻转过滤器: {{ msg | reverse('|') }}</p><!-- 2.多个过滤利使用语法: vue变量 | 过滤器1 | 过滤器2--><p :title="msg | toUp | reverse('|')">鼠标长停</p></div>
</template><script>
export default {data(){return {msg: 'Hello, Vue'}},filters: {toUp (val) {return val.toUpperCase()}}
}
</script><style></style>

总结: 过滤器可以传参, 还可以对某个过滤器结果, 后面在使用一个过滤器

Vue过滤器属性filter相关推荐

Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...
Vue过滤器-filter
Vue中的过滤器不能替代Vue中的methods.computed或者watch,因为过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本.在很多不同的情况下,过滤器都是有用的,比如尽 ...
vue基础-动态class、动态style、vue过滤器、vue计算属性vue基础-动态class、动态style、vue过滤器、vue计算属性
vue基础-动态class.动态style.vue过滤器.vue计算属性文章目录 vue基础-动态class.动态style.vue过滤器.vue计算属性 vue基础-动态class vue基础-动 ...
Vue ＜＜拦截器（interceptors ）过滤器（filter）
拦截器(interceptors) 在axios 请求或响应被 then 或 catch 处理前拦截它们. 设置请求拦截器 // 设置请求头axios.defaults.headers = {'Con ...
vue --- 过滤器、计算、方法、观察属性
过滤器属性:filters: <div id = "app">{{num}}<br>{{num | toInt}}<br>{{num | toF ...
vue+filter+html标签,vue过滤器用法实例分析
本文实例讲述了vue过滤器用法.分享给大家供大家参考,具体如下: 过滤器: vue提供过滤器: capitalize uppercase currency.... {{msg|currency ￥}} ...
带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
vue过滤器使用方法
vue过滤器使用方法过滤器分全局过滤器和局部过滤器.和自定义指令一样,过滤器对应的函数中的this是window(无论是全局的还是局部的),而不是当前vue的实例. <!DOCTYPE htm ...
Vue过滤器的传参使用及案例
Vue过滤器的传参使用及案例过滤器用于一些常见的文本格式化过滤器的第二个参数为可选使用位置过滤器可以用在两个地方:双花括号插值{{ }}和 v-bind 表达式** 使用方法 {{ 变量 | ...

Vue过滤器属性filter

vue属性过滤器filter

一. 过滤器filter作用

二. 过滤器filter语法:

三. 过滤器filter传参和多个过滤器

Vue过滤器属性filter相关推荐

最新文章

热门文章