| vue filter（过滤器）用法（用在template中）+ 格式转换（用在 ＜script＞中 ） | 您所在的位置：网站首页 › vue时间转换格式 › vue filter（过滤器）用法（用在template中）+ 格式转换（用在 ＜script＞中 ） |
vue filter（过滤器）用法（用在template中）+ 格式转换（用在 ＜script＞中 ）
|
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 格式转换 比如 我们要传给后台的时间是 YYYY-MM-DD格式，但是我们获取的时间并不是这种格式，需要转换 一、过滤器 {{ message | capitalize }} // 将首字母变成大写 {{ money | toMoney }} //则显示格式为 1,000,000下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~ eg: //首字母大写 Vue.filter('capitalize', value => { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) //钱的形式 Vue.filter('toMoney', value => { if (!value) return '' value = value.toLocaleString() }) // 保留小数点后2位 20.00 30.00 Vue.filter("keepTwoNumber", function (value) { if (!value) return "--"; value = Number(value) return value.toFixed(2) });实际应用： 1、在untils文件夹下新建一个 filter.js //长时间 YYYY-MM-DD HH:mm:ss Vue.filter("time", function(value, formatString) { if (!value) return "--"; formatString = formatString || "YYYY-MM-DD HH:mm:ss"; return moment(value).format(formatString); }); //短时间 YYYY-MM-DD Vue.filter("shorttime", function(value, formatString) { if (!value) return "--"; formatString = formatString || "YYYY-MM-DD"; return moment(value).format(formatString); }); // 字符串为空时 Vue.filter("emptyString", function(value) { return value ? value : "--"; }); Vue.filter("emptyName", function(value) { return value ? value : "暂无"; }); //数字为空时 Vue.filter("emptyNumber", function(value) { return value ? value : "0"; }); // 过滤秒 Vue.filter("leaveTime", function(value) { return moment(value).format("YYYY-MM-DD HH:mm"); }); // 过滤年月日 Vue.filter("levelTime", function(value) { return moment(value).format("HH:mm:ss"); }); //把日期转换为周（适用于下拉选择，后端返回数值，页面对应显示文字） Vue.filter("weekDay", function(value) { let week = moment(value).format("d"); let day = ""; switch (Number(week)) { //如果week是字符串形式的，则转换成数字形式的 case 0: day = "星期天"; break; case 1: day = "星期一"; break; case 2: day = "星期二"; break; case 3: day = "星期三"; break; case 4: day = "星期四"; break; case 5: day = "星期五"; break; case 6: day = "星期六"; break; } return day; }); Vue.filter("recruitProgressStatus", function(value) { let data = ""; switch (value) { case 1: data = "初试待处理"; break; case 2: data = "初试不通过"; break; case 3: data = "复试待处理"; break; } return data; });2、使用 {{scope.row.confirmTime | shorttime}} // 使用过滤器 shorttime 之后，页面显示的时间格式为：2020-05-15 {{ Number(scope.row.status) | recruitProgressStatus}} //后台返回的数据 status 是数字或者字符串数字格式，通过 过滤器recruitProgressStatus 会将数字转换成对应的文本显示在页面效果如下图： 二、格式转换 //--------------------------封装一些常用的函数----------------------- import moment from "moment"; import Vue from "vue"; // 短时间 export const shortTime = function(value) { return moment(value).format("YYYY-MM-DD"); }; // 长时间 export const time = function(value) { return moment(value).format("YYYY-MM-DD HH:mm:ss"); }; // export const leaveTime = function(value) { return moment(value).format("YYYY-MM-DD HH:mm"); }; // 短时间 export const monthTime = function(value) { return moment(value).format("YYYY-MM"); }; // 时分秒 export const secondsTime = function(value) { return moment(value).format("HH:mm:ss"); }; export const secondShortTime = function(value) { return moment(value).format("HH:mm"); }; // 获取今天的0时0分0秒 export const startTime = function(value) { return moment(value).startOf(); }; // 中国标准时间的转化 export const filterTime = (time, type = "short") => { if (type == "short") { return moment(time).format("YYYY-MM-DD"); } else { return moment(time).format("YYYY-MM-DD HH:mm:ss"); } };
|
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |