vue的简单使用5-过滤器的使用

桃扇骨 2022-02-03 22:57 423阅读 0赞

vue中过滤器可以格式化常见的文本，vue中的过滤器只能在插值表达式’\{ \{\}\}‘和v-bind中使用

#### Vue中的全局过滤器的使用 ####

定义一个Vue全局过滤

Vue.filter('过滤器名称'，函数)

定义一个Vue全局过滤器很简单，使用Vue的filter方法，第一个参数是过滤器的名称，第二个参数是处理函数，那如何使用过滤器呢 上个例子

<div id="head">
        <p>{
       { msg | myFilter }}</p>
    </div>
    <script> //Vue过滤器 Vue.filter('myFilter', function (msg) { //注意 使用正则表达式的话不要加引号 ///乳猪/g 会匹配字符串中所有的肥羊，replace会将匹配到的字符全部替换成肥羊 return msg.replace(/乳猪/g, "肥羊"); }) let vue1 = new Vue({ el: '#head', data: { msg: '看，远方有头小乳猪，晚上可以烤乳猪吃了 哈哈哈哈！' } }); </script>

\*\*\{ \{ msg | myFilter \}\}\*\*中的第一个参数是msg是data中数据，第二个参数是过滤器名称，两者之间用’’|’'隔开,当程序运行时，msg的值会传递到过滤器，经过过滤器后，最终的结果是过滤器返回的值。

上面的代码中，首先在data中定义了一个字符串msg，现在，然后定义了一个全局过滤器myFilter,在过滤器中会将所接受到的参数中的乳猪二字替换成肥羊二字，并返回

运行截图：

![在这里插入图片描述][20190506140208542.png]

再来看看过滤器中的第二个参数

function (msg) { 
            //注意 使用正则表达式的话不要加引号
            ///乳猪/g 会匹配字符串中所有的肥羊，replace会将匹配到的字符全部替换成肥羊
            return msg.replace(/乳猪/g, "肥羊");
        })

可以发现里面有一个参数，\*\{ \{ msg | myFilter \}\}\*中的msg的值会保存在函数中的第一个形参中，

接下来修改一下上面的代码

<div id="head">
        <p>{
       { msg | myFilter("黑牛") }}</p>
    </div>
    <script> //Vue过滤器 Vue.filter('myFilter', function (msg, arg) { //注意 使用正则表达式的话不要加引号 return msg.replace(/乳猪/g, arg); }) let vue1 = new Vue({ el: '#head', data: { msg: '看，远方有头小乳猪，晚上可以烤乳猪吃了 哈哈哈哈！' } }); </script>

修改过滤器中的函数，加入一个形参arg,然后给过滤器传递一个参数“黑牛”，运行：

![在这里插入图片描述][20190506140221586.png]

可以发现我们传递了一个黑牛，而运行后msg中的乳猪也全变成了黑牛，这是因为使用过滤器时可以传递参数进去，可以传递多个参数，但是第一个参数一定是要过滤的数据。

那可以同时使用多个过滤器吗？答案是肯定了，接着修改上面的代码

<div id="head">
        <p>{
       { msg | myFilter("黑牛") | myFilter2 }}</p>
    </div>
    <script> //Vue过滤器 Vue.filter('myFilter', function (msg, arg) { //注意 使用正则表达式的话不要加引号 return msg.replace(/乳猪/g, arg); }); Vue.filter('myFilter2', function (msg) { //注意 使用正则表达式的话不要加引号 return msg + "-----我是过滤器2"; }) let vue1 = new Vue({ el: '#head', data: { msg: '看，远方有头小乳猪，晚上可以烤乳猪吃了 哈哈哈哈！' } }); </script>

新定义一个过滤器myFilter2，他的作用在原字符串的尾部加上‘-----我是过滤器2’这句话，接下来在插值表达式中在过滤器myFilter后面继续添加过滤器，

运行截图

![在这里插入图片描述][20190506140236325.png]

msg被过滤器1过滤后返回的值会被后一个过滤器所过滤，知道最后一个过滤器才会返回最终的结果。

#### 私有过滤器的定义 ####

在一个页面中可以定义多个Vue的实例，每个Vue的实例都可以使用全局过滤器，既然全局过滤器是所有的Vue实例都能使用，那么私有过滤器就是只能是定义过滤器的实例使用，

定义一个私有过滤器要在创建Vue实例的实例定义，通过filters来定义（别忘了s,全局的没有s）,定义filters和定义methods差不多，

let vue1 = new Vue({
            el: '#head',
            data: {
                date: '今天做梦梦见今天要做梦!'
            },
            filters: {
                myFilter1: function (data) {
                    return data.replace(/今天/g, '明天');
                }
            }
        });

所有的私有过滤器都要定义在filters中，myFilter1是过滤器的名字，function (data)函数体是要过滤要执行的方法，功能和上面的一样，将所接受到的数据中的‘今天’修改成‘明天’并返回

例子：

<div id="head">
        <p>{
       { date | myFilter1 }}</p>
    </div>
    <script> let vue1 = new Vue({ el: '#head', data: { date: '今天做梦梦见今天要做梦!' }, filters: { myFilter1: function (data) { return data.replace(/今天/g, '明天'); } } }); </script>

运行截图

![在这里插入图片描述][20190506140246162.png]

可以看到，今天全部变成了明天

私有过滤器的使用方法和全局过滤器差不多，至于用谁就得实际情况来选择了

如果全局过滤器和私有过滤器重名了，那会使用谁呢？

答案是会使用私有过滤器，就近原则

[20190506140208542.png]: /images/20220204/71a1f55be5d34ef6a2184856ef89b48c.png
[20190506140221586.png]: /images/20220204/ac350065596f411aa492a4fbb3e85970.png
[20190506140236325.png]: /images/20220204/853d8a167ed848f48848e70f12607058.png
[20190506140246162.png]: /images/20220204/2776e284eff744adaf700643529523af.png