美文网首页
Vue中自定义过滤器

Vue中自定义过滤器

作者: ___大鱼___ | 来源:发表于2018-11-04 20:59 被阅读2次

导入Vue.js后直接在script中定义 {{ msg | msgFormat }}

同样Vue过滤器名字中可以传参, 可以替换成你想要的参数
{{ msg | msgFormat('神秘') }}

Vue.filter(msgFormat, function(msg, arg){
    return msg.replace(/大哥/g, arg)
})
Vue.filter('过滤器的名字', function(msg){
    
})

自定义替换字符串大哥为哈哈哈的过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="name">
    {{msg | msgFormat}}
</div>
</body>
<script>

    Vue.filter('msgFormat', function (msg) {
      // 正则表达式替换, 否则replace只能替换一个大哥
       return  msg.replace(/大哥/g, '哈哈哈')
    });
    var app1 = new Vue({
        el: '#name',
        data:{
            msg: '曾经我是你大哥, 后来我编程了你大哥, 可是你不知道我是你大哥, 希望我是你大哥!'
        },
        methods: {
          


            }

    })



</script>


</html>

相关文章

  • vue学习大纲3-过滤器、指令、动画

    自定义过滤器: 在vue1.0中有过滤器,比如: 在vue2.0中所有的内置过滤器都被销毁了,2.0推荐我们自己写...

  • 2018-05-28(表严肃)笔记三

    三、过滤器及自定义组件 过滤器webstorm中,中文字符串显示不出来 自定义组件 基础配置vue.directi...

  • vue filter 过滤器使用

    格式化时间 自定义全局过滤器 vue 自定义过滤器分为"全局过滤器"和"局部过滤器"两种。 一、 全局过滤器 全局...

  • Vue过滤器

    vue2.0取消了自带的过滤器,只能自定义过滤器

  • Vue过滤器和vue-resource

    过滤器 之前我们学习了Vue的 vue基本指令 进阶学习,我们需要了解Vue的过滤器:Vue.js允许你自定义过滤...

  • vue自定义过滤器

    Vue的自定义过滤器有两种:全局过滤器和内部过滤器全局过滤器定义在vue实例化之前 内部过滤器注册在实例内部,仅在...

  • vue过滤器

    1.过滤器的写法 2.Vue1自带的过滤器 3.自定义过滤器

  • vue过滤器(filter)

    vue中可以自定义过滤器,用于{{插槽}}和v-bind表达式。 全局定义(1) 全局方法 Vue.filter(...

  • VUE02

    v-cloak ref monted Vue.directive()自定义指令 }) Vue.filter过滤器 ...

  • Vue-过滤器(系统过滤器和自定义过滤器)

    1. 系统过滤器 eg1:利用vue1.0中的系统过滤器filterBy实现列表按条件刷选查询 2. 自定义过滤器...

网友评论

      本文标题:Vue中自定义过滤器

      本文链接:https://www.haomeiwen.com/subject/cycdxqtx.html