正文
vue.js（12）--过滤器
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
vue中的全局过滤器与定义私有过滤器全局过滤器<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过滤器</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div class="app">
<p>{{ msg | myFormat('哈哈哈哈哈') }}</p>
</div>
<script>
Vue.filter('myFormat',function(msg,n) { return msg.replace(/一/g,n)
})
var vm = new Vue({
el:'.app',
data:{
msg:'我是天下第一帅，我是天下第一美丽，我是天下第一可爱'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过滤器</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div class="app">
<p>{{ msg | myFormat('哈哈哈哈哈') }}</p>
</div>
<script>
Vue.filter('myFormat',function(msg,n) { return msg.replace(/一/g,n)
})
var vm = new Vue({
el:'.app',
data:{
msg:'我是天下第一帅，我是天下第一美丽，我是天下第一可爱'
}
})
</script>
</body>
</html>
通过vue.filter('过滤器名称'，function（参数）{过滤方式，返回过滤后值})的方式定义一个全局过滤器。
使用过滤器的方式格式是{{ 要处理的字符 | 过滤器的名称}}
replace（‘替换字符’，‘被替换字符’）方法的使用
定义私有过滤器<script>
var vm= new Vue({ //创建vue实例
el:'.app',
data:{
arr:[
{'id':1,'name':'iPhone','time':new Date()},
{'id':2,'name':'华为','time':new Date()},
{'id':3,'name':'OPPO','time':new Date()}
], //创建一些初始数据与格式
id:'',
name:'',
keywords:'' //初始化参数keywords为空
},
directives:{
focus:{
inserted:function(el) {
el.focus()
}
}
},//自定义指令
filters:{
timeFormat:function (dataStr) {
var myData=new Date(dataStr)
var y=myData.getFullYear()
var m=(myData.getMonth() + 1).toString().padStart(2,'0')
var d=myData.getDate().toString().padStart(2,'0')
var h=myData.getHours().toString().padStart(2,'0')
var mm=myData.getMinutes().toString().padStart(2,'0')
var s=myData.getSeconds().toString().padStart(2,'0')
return `${y}-${m}-${d} ${h}:${mm}:${s}++++++`
}
}//******创建一个私有过滤器******/
})
</script>
<script>
var vm= new Vue({ //创建vue实例
el:'.app',
data:{
arr:[
{'id':1,'name':'iPhone','time':new Date()},
{'id':2,'name':'华为','time':new Date()},
{'id':3,'name':'OPPO','time':new Date()}
], //创建一些初始数据与格式
id:'',
name:'',
keywords:'' //初始化参数keywords为空
},
directives:{
focus:{
inserted:function(el) {
el.focus()
}
}
},//自定义指令
filters:{
timeFormat:function (dataStr) {
var myData=new Date(dataStr)
var y=myData.getFullYear()
var m=(myData.getMonth() + 1).toString().padStart(2,'0')
var d=myData.getDate().toString().padStart(2,'0')
var h=myData.getHours().toString().padStart(2,'0')
var mm=myData.getMinutes().toString().padStart(2,'0')
var s=myData.getSeconds().toString().padStart(2,'0')
return `${y}-${m}-${d} ${h}:${mm}:${s}++++++`
}
}//******创建一个私有过滤器******/
})
</script>
自定义私有过滤器形式：fliters：{过滤器名称：function （）{}}
padStart方法在头部填充字符（字符串独有）实例、：时间字符串填充0
padEnd方法在尾部填充字符串
