vue过滤器的作用是什么,vue过滤方法
本文介绍了过滤器在vue中的使用，通过示例代码非常详细。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
一、过滤器
过滤器是vue中的一项功能，用于格式化文本。
注意：在vue 1.0中，有内置滤镜。在2.0中，内置过滤器被删除，只有自定义过滤器可用。
二、使用位置
过滤器只能应用在两个地方：双花括号插值和v-bind表达式(后者从2.1.0开始支持)。例如：
！-使用花括号中的格式：{ {值过滤器名称}}-
div{{3 addZero}}/div
！-使用v-bind中的格式：v-bind:id=值过滤器名称-
div v-bind:id=1 addZero11/div
三、分类
过滤器分为以下两种类型：
1、全局过滤器
示例代码如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题过滤器/标题
！-介绍vue.js -
脚本src= node _ modules/vue/dist/vue . js /script
脚本
window.onload=function(){
//定义全局过滤器
Vue.filter(addZero ，函数(值){
//如果value的值小于10，则在前面加0再返回，否则直接返回值。
返回值10？“0”值：值；
});
//构建一个vue实例
新Vue({
艾尔：“#我的”，
数据：{
},
//方法
方法：{
}
})
}
/脚本
/头
身体
div id=我的
！-使用花括号中的全局筛选器格式：{ {值筛选器名称}}-
div{{3 addZero}}/div
div{{15 addZero}}/div
！-在v-bind中使用全局筛选器格式：v-bind:id=值筛选器名称-
div v-bind:id=1 addZero11/div
div v-bind:id= 12 add zero 15/div
/div
/body
/html
效果：
2、本地过滤器
示例代码如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题过滤器/标题
！-介绍vue.js -
脚本src= node _ modules/vue/dist/vue . js /script
脚本
window.onload=function(){
//定义全局过滤器
Vue.filter(addZero ，函数(值){
//如果value的值小于10，则在前面加0再返回，否则直接返回值。
返回值10？“0”值：值；
});
//构建一个vue实例
新Vue({
艾尔：“#我的”，
数据：{
},
//方法
方法：{
},
//定义本地过滤器
过滤器：{
roundNum:函数(值){
//小数点四舍五入后保留两位。
返回值. to fixed(2)；
},
roundNumWithPara:函数(值，数字){
//根据digit，返回对应数位的小数。
返回值. toFixed(值，数字)；
}
}
})
}
/脚本
/头
身体
div id=我的
！-使用花括号中的全局筛选器格式：{ {值筛选器名称}}-
div{{3 addZero}}/div
div{{15 addZero}}/div
！-在v-bind中使用全局筛选器格式：v-bind:id=值筛选器名称-
div v-bind:id=1 addZero11/div
div v-bind:id= 12 add zero 15/div
！-使用本地过滤器-
原始div值：3.1415926，过滤值：{{3.1415926 roundNum}}/div
！-保留3位小数-
差异原始值：3.1415926,过滤后的值：{ { 3.1415926 roundNumWithPara(3)} }/div
/div
/body
/html
效果：
四、过滤器应用实例
1、使用过滤器实现省略号
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题使用过滤器实现省略号/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
//构建某视频剪辑软件实例
新Vue({
艾尔："#我的",
数据：{
消息："你好，世界",
},
//方法
方法：{
},
//定义本地过滤器
过滤器：{
//显示省略号
toShowEllipsis:function(value，len){
if(值=== 值===未定义 值===null)返回；
if(value.length=len){
var str=value.substr(0，len)；
返回字符串"."；
}否则{
返回值；
}
}
}
})
}
/脚本
/头
身体
div id=我的
！-添加省略号12345.-
输入类型=text v-model=msg
{{msg toShowEllipsis(6)}}
/div
/body
/html
效果：
2、使用过滤器处理时间戳
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题使用过滤器处理时间戳/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
//构建某视频剪辑软件实例
新Vue({
艾尔："#我的",
数据：{
柯蒂斯：1546181790
},
//方法
方法：{
},
//定义本地过滤器
过滤器：{
//处理时间戳将时间戳转换成具体时间
toTimeStamp:函数（值){
//d表示日期t日期和时间
变量d=新日期（值* 1000);
return d . get full year()-(d . get month()1)- d . get date() d . get hours(): d . get minutes(): d . get seconds()
}
}
})
}
/脚本
/头
身体
div id=我的
！-时间戳-
p当前时间：{{curTime toTimeStamp }}/p
/div
/body
/html
效果：
到此这篇关于某视频剪辑软件中过滤器用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。