直播微信小程序商城_vue学习笔记之过滤器的根本使用方法实例分

vue学习笔记之过滤器的基本使用方法实例分析     ~Liu   这篇文章主要介绍了vue学习笔记之过滤器的基本使用方法,结合实例形式分析了vue.js过滤器的基本功能、用法与操作注意事项,需要的朋友可以参考下

本文实例讲述了vue学习笔记之过滤器的基本使用方法。分享给大家供大家参考,具体如下:

以下是一个将浏览器默认时间格式格式化的例子:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 过滤器 /title 
 script src="npm/vue/dist/vue.js" /script 
 /head 
 body 
 !-- | 是管道符,可以对前面的数据进行过滤,一般用于格式化数据,eg,货币(1,000,000)-- 
 div id="root" 
 {{date | formatDate}}
 /div 
 script 
 // 在时间小于10前补0
 var padDate = function (value) {
 return value 10 '0' + value : value;
 var app = new Vue({
 el: "#root",
 data: {
 date: new Date()
 /*过滤器*/
 filters: {
 formatDate: function (value) {
 var date = new Date(value);
 var year = date.getFullYear();
 var month = padDate(date.getMonth());
 var day = padDate(date.getDay());
 var hour = padDate(date.getHours());
 var minutes = padDate(date.getMinutes());
 var seconds = padDate(date.getSeconds());
 return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
 /*挂载完成,html页面渲染完毕,一半做一些Ajax操作,只执行一次*/
 mounted: function () {
 var _this = this;
 this.timer = setInterval(function () {
 _this.date = new Date();
 }, 1000);
 beforeDestory: function () {
 if (this.timer) {
 clearInterval(this.timer);// 在vue实例销毁前清楚定时器
 /script 
 /body 
 /html 

在vue中使用过滤器,要注意!只是改变了在前端页面渲染的格式,而不会改变数据的存储的格式 全局过滤器定义必须始终位于Vue实例之上,否则你将会得到一个“Failed to resolve filter: XXX”的错误信息。 过滤器串联
过滤器接受参数 【js中接受的参数,第一个始终是value,传入的参数是第2,3,4....个参数】

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。


相关阅读