Vue.js系列教材（九）- 中使用过滤器

Vue.js系列教材（八）- vue.js 通过watch 监听属性变化

Vue.js系列教材（十）- vue.js 中使用组件举例

工具版本兼容问题

步骤 1 : 一个过滤器
步骤 2 : 多个过滤器
步骤 3 : 全局过滤器

步骤 1 :

一个过滤器

edit 顶折

纠问

定义一个首字母大写过滤器

filters:{
capitalize:function(value) {
if (!value) return '' //如果为空，则返回空字符串
value = value.toString()
return value.charAt(0).toUpperCase() + value.substring(1)
}
}

然后在视图里如下方式使用：

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;	
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>输入数据</td>
            <td>过滤后的结果</td>
        </tr>       
        <tr>
        	<td align="center">
        		<input v-model= "data"  />
        	</td>
        	<td align="center">
        		{{ data|capitalize }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  data:''
      },
      filters:{
    	  capitalize:function(value) {
    		    if (!value) return '' //如果为空，则返回空字符串
    		    value = value.toString()
    		    return value.charAt(0).toUpperCase() + value.substring(1)
          }
      }
    })
     
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 2 :

多个过滤器

edit 顶折

纠问

定义两个过滤器，分别是首字母大写和尾字母大写
然后通过如下方式同时首字母大小写

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;	
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>输入数据</td>
            <td>过滤后的结果</td>
        </tr>       
        <tr>
        	<td align="center">
        		<input v-model= "data"  />
        	</td>
        	<td align="center">
        		{{ data|capitalize|capitalizeLastLetter }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  data:''
      },
      filters:{
    	  capitalize:function(value) {
    		    if (!value) return '' //如果为空，则返回空字符串
    		    value = value.toString()
    		    return value.charAt(0).toUpperCase() + value.substring(1)
          },
      	  capitalizeLastLetter:function(value) {
    		    if (!value) return '' //如果为空，则返回空字符串
    		    value = value.toString()
    		    return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
          }
      }
    })
     
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 3 :

全局过滤器

edit 顶折

纠问

在上面的例子里可以看到，过滤器是定义在Vue对象里的。但是有时候，很多不同的页面都会用到相同的过滤器，如果每个Vue对象里都重复开发相同的过滤器，不仅开发量增加，维护负担也增加了。
所以就可以通过全局过滤器的方式，只定义一次过滤器，然后就可以在不同的Vue对象里使用了。
注册全局过滤器：

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
Vue.filter('capitalizeLastLetter', function (value) {
if (!value) return '' //如果为空，则返回空字符串
value = value.toString()
return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
})

然后就可以像前面的例子那样使用了

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;	
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>输入数据</td>
            <td>过滤后的结果</td>
        </tr>       
        <tr>
        	<td align="center">
        		<input v-model= "data"  />
        	</td>
        	<td align="center">
        		{{ data|capitalize|capitalizeLastLetter }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
Vue.filter('capitalize', function (value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
})
	
Vue.filter('capitalizeLastLetter', function (value) {
	if (!value) return '' //如果为空，则返回空字符串
	value = value.toString()
	return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
})

new Vue({
      el: '#div1',
      data: {
    	  data:''
      }
    })
     
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

new Vue({
      el: '#div1',
      data: {
    	  data:''
      }
    })
     
</script>

渲染中渲染完成

效果

Vue.js系列教材（八）- vue.js 通过watch 监听属性变化

Vue.js系列教材（十）- vue.js 中使用组件举例

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2020-04-08 过滤器里的代码不需要加分号吗

浩子♍

关于前端部分-Vue.js-过滤器的提问

看了下,过滤器里没有分号,其他的方法,监听等都有分号这个是只有过滤器里可以不写粉好吗?

filters:{
          capitalize:function(value) {
                if (!value) return '' //如果为空，则返回空字符串
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.substring(1)
          },
          capitalizeLastLetter:function(value) {
                if (!value) return '' //如果为空，则返回空字符串
                value = value.toString()
                return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
          }
      }

1 个答案

Q7_iu
答案时间：2020-04-19

这些代码都是js格式的吧，加不加都一样

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-12-23 个人理解的过滤器的意义

sparksun007

关于前端部分-Vue.js-过滤器的提问

我的理解过滤器本质就是一个函数，一种特殊的函数，将 “|” 前面的结果作为后面过滤器的参数，方便书写和理解。 {{ data|capitalize|capitalizeLastLetter }}--》如果是普通函数的话要写成这样 {{ capitalizeLastLetter(capitalize(data)) }} 请问站长，我这样理解对吗？

3 个答案

hhhzt
答案时间：2021-01-26

没毛病，你自己试试就知道了，在第二个过滤器里面加多一行代码 document.getElementById("div2").innerHTML = value 加多一个id=div2的标签

ercilan
答案时间：2020-10-30

如果知道shell/bat，就懂了

梦想黑客
答案时间：2020-05-23

我觉得理解的正确，哈哈

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-11-11 站长网站的做的真好，由浅入深，良心，赞

2019-07-26 特别搞不懂为什么要这样{{ data|capitalize }}

孙陆泉1

关于前端部分-Vue.js-过滤器的提问

还有就是我不传参数用普通的methods方法也可以实现

<div id="mydiv">
        	<table>
        		<tr class="firstLine">
        			<td>输入数据</td>
        			<td>过滤后的值</td>
        		</tr>
        		<tr>
        			<td><input type="text" v-model="data"></td>
        			<td>{{ capitalize() }}</td>
        		</tr>
        	</table>
        </div>
        <script src="js/vue.min.js"></script>
        <script type="text/javascript">
        	new Vue({
        		el:"#mydiv",
        		data:{
        			data:'',
        		},
        		methods:        			capitalize:function(){
        				if(!this.data)
        					return '';
        				return this.data.charAt(0).toUpperCase()+this.data.substring(1);
        			}
        			/*capitalize:function(value){
        				if(!value)//!value 判断是否为null或者''是的话就是true
        					return '';
        				return value.charAt(0).toUpperCase()+value.substring(1);
        			}*/
        		}
        	})
        	
        </script>

5 个答案

vivin
答案时间：2020-03-21

作用是一样的.更好看一些吧. 有点类似linux的管道的概念. 上面的兄弟也说了. 为什么说更好看呢? 比如原始数据 | 全部小写 | 首字母大写 | 中字母大写 | 尾字母大写你要是不用这种表达就得写成尾字母大写(中字母大写(首字母大写(全部小写(原始数据)))) 非常难看

贝贝飞
答案时间：2020-01-06

用linux的命令 ps -ef | grep java 我认为他俩的作用差不多

大头鬼
答案时间：2019-08-22

这样理解吧，把你的数据丢给过滤器，先完成数据的传输，第二先解决首字母大写，再把数据取出来，然后做尾字母大写。解决了

沐春秋
答案时间：2019-08-11

类似Linux 语法：管道比如 cat xxx.text | grep "abc" | 是管道，还是很好联系记忆法的！

大猫别跑
答案时间：2019-07-29

“ | ”这个表示把数据丢给过滤器

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-03-01 大哥们走过路过帮一下我谢谢嗷

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 2 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-Vue.js-过滤器的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图