《跟热饭一起学习vue吧》Part.9 过滤器

简介: 《跟热饭一起学习vue吧》Part.9 过滤器


过滤器


ue的新知识点,过滤器,这个过滤器是要过滤谁?其实就是某个变量而已。但是这里我觉得叫过滤器并不准确,因为它能做的事情太多了,叫修改器还差不多。

比如我要显示一个变量message


<p>{{ message }}</p>


但是这里有个需求,就是要把这个变量内容的字符串首字母变成大写!


这要怎么做呢?其实就可以在里面加个函数专门办这件事即可。


那么怎么来让这个函数自动生效运行,并且每次都能作用到这个变量身上呢?简单来说,就是怎么用?


这时候就引出了我们的知识点,过滤器。


然后我们仍然面临三个问题:


1.函数写在哪?

答:我们要学习一个vue构造器的新组成部分:filters,也就是我们本节课的核心内容:过滤器。它和data和methods类似,内容都用大括号包裹。里面放的都是函数,用来对显示的各种文案进行过滤或修改。


比如我们声明一个过滤器函数叫 capitalize。它负责把要修改的字符串的首字母大写。那么就应该放在这里:

image.png


2.函数怎么写?


函数内部的逻辑并不是我们学习vue的主要内容,因为是js写的,所以这里给大家看一下即可,能不能理解暂时不那么重要。

image.png

首先看下这个过滤器函数的入参,也就是这个value,这个value就是要改造的字符串。


下面就是正常的js判断,如果为空则返回空,否则就先变成字符串,然后用下标0代表首字母,用toUpperCase来变成大写,再拼接上从下标1开始的其余部分,最终把这个字符串返回。返回到哪?当然返回到p标签中了。


3.函数怎么调用?


在dom层使用,你想给那个变量用上这个过滤器函数 就用。然后这个变量就会进入到过滤器函数中变成那个入参value,然后返回新的字符串放在dom层展示。

具体写法:


![](https://gitee.com/woodywrx/picture/raw/master/2021-7-29/1627551891094-image.png)


如下图所示,即成功的过滤器使用demo:

image.png

关于过滤器,其实还有其他更复杂的用法,大家可以提前了解下。

过滤器串联:


{{ message | filterA | filterB }}


顾名思义,就是这个message变量的数据让filterA改造一遍,然后再让filterB改造一遍后 才显示到页面上。


过滤器带参数:


{{ message | filterA('arg1', arg2) }}


如上面这句demo,意思是说,过滤器函数不但可以接收字符串等类型的参数,如:"arg1",还可以接收 表达式arg2 作为参数,比如写成:


{{ message | filterA('arg1', 1+1) }}


那么就会最后接收一个 2 作为参数,表达式会先被求值,然后把值当做参数。


而本来我们什么参数都不写的时候,它会自动把message变量的值当做第一个参数,那我们现在加上其他的参数后,这顺序是什么呢?答案是:message的值仍然作为第一个参数value,而我们自己加的所有参数,将被安排到第二个,第三个位置上..... 依次类推。

相关文章
|
10天前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
44 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
9天前
|
JavaScript
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
这篇文章是关于Vue.js的学习指南,涵盖了事件监听、条件判断、循环遍历、数组方法响应性、案例分析以及高阶函数的使用。
45 2
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
|
1月前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
59 11
|
10天前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
23 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
1月前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
127 58
|
4天前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
10 1
|
9天前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
19 1
|
9天前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
41 1
|
13天前
|
存储 JSON JavaScript
Vue基本学习
Vue基本学习
12 0
|
1月前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
31 2