vue过滤器
-
过滤器作用:在某些值呈现给用户前做最后一步过滤,可被用于一些常见的文本格式化
-
过滤器使用范围:双花括号插值和 v-bind 表达式
-
过滤器形式: 分为 全局过滤器 和 私有过滤器
-
过滤器可以有参数,无参数,有多个参数
-
全局过滤器:必须在创建 Vue 实例之前全局定义过滤器
<div v-for="item in list" :key="item.name" class="text item">
name:{{ item.name }} region: {{ item.region | lower(item.region)}}
</div>
// 必须在创建 Vue 实例之前全局定义过滤器
Vue.filter('lower',function(msg) {return msg.toLowerCase()})
- 私有过滤器:filters中的s千万不要忘记
<template>
<div class='main'>
<div v-for="item in list" :key="item.name" class="text item">
name:{{ item.name }} region: {{ item.region | lower(item.region)}}
</div>
</div>
</div>
</template>
<script>
export default {
// import引入的组件需要注入到对象中才能使用
data() { // 这里存放数据
return {
list: []
};
},
// 过滤集合 (s千万不要忘记)
filters: {
lower(msg) {
return msg.toLowerCase()
}
</script>
-
过滤器可以串联:
{{ message | filterA | filterB }}
在这个例子中,filterA
被定义为接收单个参数的过滤器函数,表达式 message
的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB
,将 filterA
的结果传递到 filterB
中。