原文链接：vue(vue.js)—过滤器 – 每天进步一点点 (longkui.site)
vue中的过滤器是对要显示的数据进行特定格式化后进行显示。比如最常用的保留两位小数，我们就可以用过滤器实现，它并没有改变原始数据的值，只是通过新的方式显示出来。功能类似于angular中的管道。
对于过滤器要知道两点
1.对要显示的数据进行特定格式化后再显示。
2.并没有改变原本的数据，只是用新的数据进行显示。
3.过滤器的本质就是一个函数
0.简单的用法
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue测试</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
<div id="root">
<h3>格式化前的时间{{time}}</h3>
<h3>格式化后的时间{{time | timeFormat }}</h3>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
time:new Date().getTime() //获取时间戳
},
//过滤器
filters:{
timeFormat(value){
//value值就是 ‘|’ 的值,return 会直接替换掉原来的值
console.log(value)
return moment(value).format("YYYY-MM-DD")
}
}
})
</script>
</body>
</html>
|
效果如下：
上方所谓的过滤器就是 {{ time | timeFormat}} 这一部分，主要是“|” 这个符号解析的，vue读取的时候，先将“|” 符号前的time 作为传递到 timeFormat这个函数中，这个函数调用了momentjs对时间进行了格式化然后返回到页面中进行展示。
当然这个也支持自定义参数格式，也就是你的时间格式化的结果 不一定只有一种，可能有很多种。
2.组合用法
过滤器可以多个连在一起用，类似{{ time | timeFormat | str1 | str2 }} 这种，原则上可以无限套娃，但是实际开发中用的并不多，最多用过两层。
举例来说，上面的我们格式化时间后假如只想截取前几位，那么可以用字符串截取函数。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue测试</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
<div id="root">
<h3>格式化前的时间{{time}}</h3>
<h3>格式化后的时间{{time | timeFormat }}</h3>
<h3>格式化前的字符串{{str}}</h3>
<h3>格式化后的字符串{{str | mystr | mySlice}}</h3>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
time:new Date().getTime(), //获取时间戳
str:"ni hao!"
},
//过滤器
filters:{
timeFormat(value){
//value值就是 ‘|’ 的值,return 会直接替换掉原来的值
console.log(value)
return moment(value).format("YYYY-MM-DD")
},
//字符串截取过滤器
mySlice(value){
console.log("mySlice",value)
return value.slice(0,3)
},
//字符串拼接过滤器
mystr(value){
console.log("mystr",value)
return value+"hello"
}
}
})
</script>
</body>
</html>
|
效果图如下：
可以看出，字符按第一个过滤器执行的结果是 ni hao!hello
按照第二个过滤器执行的结果是hi
标签：vue,格式化,script,h3,value,js,过滤器 From： https://www.cnblogs.com/longkui-site/p/18474980