vue中过滤器如何使用
导读：本文共3584字符，通常情况下阅读需要12分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 一、过滤器过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器二、使用位置过滤器只能应用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。例如：<!--在双花括号中使用格式：{{值|过滤器的名称}}--><div>... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。一、过滤器
过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。
注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器
二、使用位置
过滤器只能应用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。例如：
<!--在双花括号中使用格式：{{值|过滤器的名称}}--><div>{{3|addZero}}</div><!--在v-bind中使用格式：v-bind:id="值|过滤器的名称"--><divv-bind:id="1|addZero">11</div>三、分类
过滤器分为以下两种类型：
1、全局过滤器
示例代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>过滤器</title><!--引入vue.js--><scriptsrc="node_modules/vue/dist/vue.js"></script><script>window.onload=function(){//定义全局过滤器Vue.filter("addZero",function(value){//如果value的值小于10则在前面添加0然后返回，否则直接返回value值returnvalue<10?"0"+value:value;});//构建vue实例newVue({el:"#my",data:{},//方法methods:{}})}</script></head><body><divid="my"><!--在双花括号中使用全局过滤器格式：{{值|过滤器的名称}}--><div>{{3|addZero}}</div><div>{{15|addZero}}</div><!--在v-bind中使用全局过滤器格式：v-bind:id="值|过滤器的名称"--><divv-bind:id="1|addZero">11</div><divv-bind:id="12|addZero">15</div></div></body></html>效果：
2、本地过滤器
示例代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>过滤器</title><!--引入vue.js--><scriptsrc="node_modules/vue/dist/vue.js"></script><script>window.onload=function(){//定义全局过滤器Vue.filter("addZero",function(value){//如果value的值小于10则在前面添加0然后返回，否则直接返回value值returnvalue<10?"0"+value:value;});//构建vue实例newVue({el:"#my",data:{},//方法methods:{},//定义本地过滤器filters:{roundNum:function(value){//四舍五入小数点后保留两位returnvalue.toFixed(2);},roundNumWithPara:function(value,digit){//根据digit返回相应位数的小数returnvalue.toFixed(value,digit);}}})}</script></head><body><divid="my"><!--在双花括号中使用全局过滤器格式：{{值|过滤器的名称}}--><div>{{3|addZero}}</div><div>{{15|addZero}}</div><!--在v-bind中使用全局过滤器格式：v-bind:id="值|过滤器的名称"--><divv-bind:id="1|addZero">11</div><divv-bind:id="12|addZero">15</div><!--使用本地过滤器--><div>原始值：3.1415926，过滤后的值：{{3.1415926|roundNum}}</div><!--保留小数点后3位--><div>原始值：3.1415926，过滤后的值：{{3.1415926|roundNumWithPara(3)}}</div></div></body></html>效果：
四、过滤器应用实例
1、使用过滤器实现省略号
代码示例如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>使用过滤器实现省略号</title><!--引入vue.js--><scriptsrc="node_modules/vue/dist/vue.js"></script><script>window.onload=function(){//构建vue实例newVue({el:"#my",data:{msg:'helloworld',},//方法methods:{},//定义本地过滤器filters:{//显示省略号toShowEllipsis:function(value,len){if(value===''||value===undefined||value===null)return;if(value.length>=len){varstr=value.substr(0,len);returnstr+'...';}else{returnvalue;}}}})}</script></head><body><divid="my"><!--添加省略号12345...--><inputtype="text"v-model="msg">{{msg|toShowEllipsis(6)}}</div></body></html>效果：
2、使用过滤器处理时间戳
代码示例如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>使用过滤器处理时间戳</title><!--引入vue.js--><scriptsrc="node_modules/vue/dist/vue.js"></script><script>window.onload=function(){//构建vue实例newVue({el:"#my",data:{curTime:1546181790},//方法methods:{},//定义本地过滤器filters:{//处理时间戳将时间戳转换成具体时间toTimeStamp:function(value){//d表示日期t日期和时间vard=newDate(value*1000);returnd.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+""+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()}}})}</script></head><body><divid="my"><!--时间戳--><p>当前时间：{{curTime|toTimeStamp}}</p></div></body></html>效果：
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
vue中过滤器如何使用的详细内容，希望对您有所帮助，信息来源于网络。