3.vue过滤器

最新推荐文章于 2024-04-25 08:59:22 发布

qq_26144233

最新推荐文章于 2024-04-25 08:59:22 发布

阅读量269

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_26144233/article/details/104037092

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

过滤器概念

Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：mustache 插值和 v-bind 表达式
过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示
过滤器中的 function，第一个参数是管道符前面传递过来的数据
过滤器调用时候的格式：
{{value| 过滤器的名称}}

全局过滤器

Vue.filter(‘过滤器的名称’，function(){})

案例

<head>
<meta charset="UTF-8">
<title></title>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<div id="app">
        <!-- 可以调用多个过滤器 -->
        <p>{{ msg | msgFormat('母后','123') | test}}</p>
    </div>
</head>
<body>
	
</body>
<script type="text/javascript">
	
  // 定义一个Vue全局的过滤器，名字叫做  msgFormat
        Vue.filter('msgFormat',function(msg,arg,arg2){
            // 字符串的 replace 方法，第一个参数，除了可写一个 字符串 之外，还可以定义一个正则
            return msg.replace(/魔镜/g,arg + arg2)
        })

        Vue.filter('test',function(msg){
            return msg + '======='
        })

        var vm = new Vue({
            el:'#app',
            data:{
                msg:'魔镜魔镜，谁是这世界上最美丽的女人，魔镜说当然是小鱼儿'
            },
        })
</script>
</html>

以上内容出自：作者：小鱼儿_逆流而上
链接：https://www.jianshu.com/p/a585f4c55f72

局部过滤器

第一个参数依然是使用filter的message值。

	<li v-for='(item,index) in arr'>
		{{item.status|filterItem}}
	</li>

	new Vue({
		data:{
			arr:[
				{text:'banner',status:1},
				{text:'orange',status:2}
			]
		},
		filters:{
			filterItem:function(status){
				var statusArr=['success','failed'];
				return statusArr[status];
			}
		}
	})

过滤器总结

作用：用作一些常见的文本格式化
用法：过滤器应该被添加在 mustache 插值的尾部
Vue 2.x 中，过滤器只能在 mustache 绑定中使用。为了在指令绑定中实现同样的行为，你应该使用计算属性。
外部写法定义在实例化vue之前。
过滤器有返回值。
使用场景：如后台返回1,2,3,4等情况时，1表示支付成功，2表示支付失败

qq_26144233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.vue过滤器

过滤器概念Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：mustache 插值和 v-bind 表达式过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示过滤器中的 function，第一个参数是管道符前面传递过来的数据过滤器调用时候的格式：{{value| 过滤器的名称}}全局过滤器Vue.filter(‘过滤器的名称’，f...
复制链接

扫一扫

专栏目录