一起学Vuejs（十九）----- 过滤器

不积跬步，无以至千里；不积小流，无以成江海。

 

Vuejs语言基础

 

过滤器：

用来筛选出符合条件的，丢弃不符合条件的；

既可以筛选，又可以对筛选出来的进行加工。

 

• 使用位置

1. 双括号插值内：

{{ msg | filterA }}

 2. v-bind绑定的值的地方：

<h1 v-bind:id=" msg | filterA">{{ msg }}</h1>

 

• 使用方式

1. 单个使用：

{{ msg | filterA }}

 2. 多个使用：

{{ msg | filterA| filterB }}

 

• 定义方式

1. 局部过滤器:定义在vue的实例中。其作用的区域也是vue实例控制的区域：

var vm = new Vue({
    el: '#app',
    data: {
        name: 'tutu'
    },
    methods: {},
     //定义私用局部过滤器。只能在当前 vue 对象中使用
    filters: {
        dataFormat(msg) {
            return msg+'www';
        }
    }
});

 2. 全局过滤器

<div id="app">
    <p>{{ msg | msgFormat}}</p>
</div>

<script>
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function(msg) {
    // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
        return msg + 'www'
    })
</script>

 

 

博客借鉴：https://www.cnblogs.com/wujiaofen/p/11236176.html