vue filter过滤器

拼搏现实的明天。 2021-07-24 18:56 503阅读 0赞

过滤器
    
    	方式一:局部过滤器
    		1、与data同级
    			filters:{
    				xx:function(value)
    				{
    					return  value+x
    				}
    			}
    
    			其中:value为|前面的值
    
    		2、在要过滤的文本后面
    			{
       {"str"/数值| xx}}
    			<div v-bind:id="rawId | xx"></div>
    		
    		3、串联过滤器
    			{
       { message | filterA | filterB }}
    		
    		4、过滤器接收参数
    			过滤器是JavaScript函数,因此可以接收参数:
    			{
       { message | filterA(arg1, arg2) }}	message为第一个参数,arg1和arg2作为第二和第三个参数
    			
    	方式二:
    		1、全局过滤器
    			import Vue from 'vue'
    			
    			Vue.filter('xx',function(value){
    			  return xxx;
    			})
    		
    		2、使用
    			{
       {"str"/数值| xx}}

代码示例:

<template>
    	
    	<div>
    		{ { "hh 20" | fil}}
    		{ { "这个"| str}}
    	</div>
    </template>
    <script>
    export default{ 
    	name:'d',
    	data()
    	{ 
    		return{ 
    
    		}
    	},
    	filters:{ 
    		fil:function(value)
    		{ 
    			if(!value)
    			{ 
    				return;
    			}
    			value=value.toString()
    			return "$"+value	
    		},
    		str:function(value)
    		{ 
    			if(!value)
    			{ 
    				return;
    			}
    			return value+'jeff'	
    		}
    	}
    
    }
    </script>
    <style lang="css">
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，503人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue过滤器 filter

笔记关于filter的官方文档的一些讲解及个人的一些拓展简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给...

素颜马尾好姑娘i/ 2024年04月18日 13:16/ 0 赞/ 90 阅读

相关 Vue.js过滤器filters

![666b410860d144eb91c2a90ee68baa74.gif][] 目录一、局部过滤器二、全局过滤器三、过滤器串联四、过滤器接收多个参数

╰+哭是因爲堅強的太久メ/ 2024年03月23日 16:07/ 0 赞/ 77 阅读

相关 Vue.filter时间过滤器

Vue.filter('timer',function(str){ if(!str) return ''; let textDat

桃扇骨/ 2023年03月01日 12:58/ 0 赞/ 15 阅读

相关 vue 过滤器 filter

<body> <div id="app"> <input type="text" v-model='msg'> <div>{

超、凢脫俗/ 2023年01月08日 04:22/ 0 赞/ 216 阅读

相关【vue用法】Vue过滤器 filter

简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从\['a

客官°小女子只卖身不卖艺/ 2022年12月08日 01:57/ 0 赞/ 240 阅读

相关 vue 过滤器 filters

过滤器通过某种逻辑统一修改多条数据过滤器分为局部过滤器和全局过滤器局部过滤器 new Vue({ el: ....

╰半橙微兮°/ 2022年11月29日 12:23/ 0 赞/ 282 阅读

相关 vue 全局注册过滤器 filter

随着 vue 的脚手架不断更新，搭建项目的时候很多东西都需要我们自己来配置，比如说过滤器 filter。以我个人习惯为例： 1、创建一个 filters.js 文件，在

﹏ヽ暗。殇╰゛Y/ 2022年11月07日 05:56/ 0 赞/ 281 阅读

相关 VUE_filters过滤器传递参数

<div> { {price | priceFilter(100)}} </div> data: { price

待我称王封你为后i/ 2022年10月23日 11:25/ 0 赞/ 239 阅读

相关 Vue中的过滤器（filter）

目录过滤器使用位置全局过滤器、局部过滤器全局过滤器：局部过滤器：过滤器中传入多个参数：多个过滤器串联： --------------------

柔光的暖阳◎/ 2021年07月25日 13:48/ 0 赞/ 642 阅读

相关 vue filter过滤器

过滤器方式一:局部过滤器 1、与data同级 filters:{ xx:function(value)

拼搏现实的明天。/ 2021年07月24日 18:56/ 0 赞/ 504 阅读