1.认识过滤器
- 过滤器的作用：用于文本格式化，仅仅作为格式化操作，不做复杂的业务处理
- 过滤器的使用方式：通过管道符号(|)来使用
- 过滤器的使用位置：mustache插值和v-bind表达式
2.过滤器的简单使用
2-1 使用过滤器
下面演示过滤器的两种使用方式。
在模板中使用过滤器
<template>
<div id="app">
<!-- mustache插值 -->
<p>{{ testMsg | filter1 }}</p>
<!-- v-bind表达式 -->
<input :value="testMsg | filter1" type="text">
</div>
</template>2-2 定义过滤器
定义过滤器 过滤器的作用：为每一个字母后增加一个空格
<script type="text/javascript">
export default {
data() {
return {
testMsg: 'test'
}
},
filters: {
filter1(value) {
return value.replace(/([a-zA-Z]{1})/g, '$1 ')
}
}
}
</script>3.过滤器参数
3-1 使用单个过滤器
一般情况下，过滤器使用的是一个参数，但是，如果要根据指定的方式来处理文本，就要使用函数吗？不需要，因为，过滤器可以传递n个参数。
如果要修改上面代码中的过滤器，根据传入的参数来分割字母，可以使用下面的方式修改。
<template>
<div>
<p>{{ testMsg | filter1('--') }}</p>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
testMsg: 'test'
}
},
filters: {
filter1(value, arg) {
return value.replace(/([a-zA-Z]{1})/g, '$1' + arg)
}
}
}
</script>- 定义过滤器的时候，需要指定两个参数
- 第一个参数是管道符之前的值，
{{ testMsg | filter1('--') }}中的testMsg - 第二个参数是过滤器中需要传递的值，
{{ testMsg | filter1('--') }}中的'--'
3-2 使用多个过滤器
过滤器可以多个一起使用，如{{msg | filter1 | filter2 | filter3}}。
参数传递情况：
{{msg | filter1 | filter2 | filter3}}
<!--
msg 作为 filter1 的参数
msg | filter1 的结果作为 filter2 的参数
msg | filter1 | filter2 的结果作为 filter3 的参数
-->
