vue.js如何使用filter


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

<div id="app">

      <p>{{ msg | msgFormat('疯狂','--')}}</p>

  </div>

  <script>

      // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat

      Vue.filter('msgFormat', function(msg, arg, arg2) {

          // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则

          return msg.replace(/单纯/g, arg+arg2)

      })

</script>

3、局部过滤器

局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例【#app】控制的区域

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 创建 Vue 实例,得到 ViewModel

var vm = new Vue({

    el: '#app',

    data: {

        msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'

    },

    methods: {},

    //定义私用局部过滤器。只能在当前 vue 对象中使用

    filters: {

        dataFormat(msg) {

            return msg+'xxxxx';

        }

    }

});

注意:

1、 当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

相关学习推荐:js视频教程

以上就是vue.js如何使用filter的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

vue.js支持ie8吗

vue.js怎么实现页面传值

vue.js全家桶是什么

vue.js中怎么移除数组值

vue.js中如何注册组件

vue.js如何操作dom

为什么用vue.js,为什么前端开发46%的人都在用?

前端vue.js是什么

一文带你看看vue router4中的酷炫功能

vue.js的优点是什么

更多相关阅读请进入《vue.js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...