小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
Vue.js 过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化，比如字母的大写、货币的千位使用逗号分隔。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。
//<!-- 在双花括号中 message：data中定义的属性 | 管道符 capitalize:过滤器 -->
{{ message | capitalize }}
//<!-- 在 `v-bind` 中 |管道符 formatId：过滤器 -->
<div v-bind:id="rawId | formatId"></div>
过滤器换算金额：
<body>
<div id ="app">
一碗烩面{{price|format_price('￥ ')}}
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
price:2000,
money:100
},
filters: {
//v 是管道符最前面的第一个参数
//v2是调用过滤器传递的实参
format_price(v,v2){
return `${v2}${v/100}`;
}
}
});
</script>
</body>
用法：
你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
过滤的规则是自定义的，通过给Vue示例添加选项filters来设置 过滤器是 JavaScript 函数，因此可以接收参数,过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
全局定义过滤器：
<body>
<div id ="app">
一碗烩面{{price|format_price('￥ ')}}
</div>
<script>
//全局过滤器
Vue.filter('format_price',function(v,v2){
return `${v2}${v/100}`;
})
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
price:2000,
money:100
},
// filters: {
// //v 是管道符最前面的第一个参数
// //v2是调用过滤器传递的实参
// format_price(v,v2){
// return `${v2}${v/100}`;
// }
// }
});
</script>
</body>
过滤器可以串联
{{ message | filterA | filterB }}
//filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
<body>
<div id ="app">
<!-- type的第一个参数 是前面整个过滤器的结果 -->
一碗烩面{{price|format_price('￥ ')|type('分')}}
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
price:2000,
money:100
},
filters: {
//v 是管道符最前面的第一个参数
//v2是调用过滤器传递的实参
format_price(v,v2){
return `${v2}${v/100}`;
},
type(v,v3){
return`${v}${v3}`;//$20分
}
}
});
</script>
</body>
Demo
需求说明 格式化的规则是当 月份、日期、小时等小于 10的时候，前面补上 0 对需要过滤的数据调用定义的规则进行处理，并返回处理之后的结果 使用mounted生命周期函数，每隔1s更新一下时间 使用beforeDestroy生命周期函数，在组件销毁前清除定时器
<body>
<div id ="app">
{{time}}
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
time:new Date(),
timer:null
},
// 挂载后执行
mounted () {
this.timer = setInterval(() => {
this.time = new Date();
}, 1000);
},
// 组件销毁前执行
beforeDestroy () {
clearInterval(this.timer);
}
});
</script>
</body>
<body>
<div id="app">
{{time|formart()}}
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
time: new Date(),
timer: null
},
// 挂载后执行
mounted() {
this.timer = setInterval(() => {
this.time = new Date();
}, 1000);
},
// 组件销毁前执行
beforeDestroy() {
clearInterval(this.timer);
},
//过滤器
filters: {
formart(date) {
let y = date.getFullYear(); // 年
let m = (date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):(date.getMonth() + 1); // 月
let day = date.getDate()<10?'0'+date.getDate():date.getDate();// 日
let h = date.getHours(); // 时
let min = date.getMinutes(); // 分
let s = date.getSeconds(); // 秒
return `${y}-${m}-${day} ${h}:${min}:${s}`
}
}
});
</script>
</body>
