相关文章推荐
想出国的大象  ·  vue ...·  3 周前    · 
无聊的莴苣  ·  Vue 中 $set() 与 ...·  2 周前    · 
坚韧的跑步鞋  ·  Layui ...·  2 周前    · 
挂过科的镜子  ·  VUE 使用 select ...·  2 周前    · 
调皮的斑马  ·  柳叶_百度百科·  1 月前    · 

因为前端也需要一个功能全的自定义格式扩展,vue-text-format这个扩展移植了excel的功能,可以在页面上方便的对数据改变显示格式。
使用方式也很简单,通过扩展vue的自定义命令v-format的形式,绑定格式,就可以将内部的文本进行转换。

npm install vue-text-format

import Vue from 'vue'
import format from 'vue-text-format';
Vue.use(format);

方式1:指令v-format
通过v-format传入想要转换的格式

<div v-format="'0.##%'">0.123</div>

方式2:函数调用,vue原型上绑定了一个textFormat函数

export default {
    name: 'home',
    mounted() {
        let newVal = this.textFormat(0.123, '0.##%');
        // 将获得12.3%

通过v-format传入想要转换的格式,我们通过几个例子,让你了解一下这个格式代码功能到底有多全多强大

<div v-format="'0.##%'">0.123</div> <!--最终显示的值是 【12.3%】转换百分比 --> <div v-format="'0.00%'">0.123</div> <!--最终显示的值是 【12.30%】 转换百分比,控制占位符--> <div v-format="'#,##0.00'">1200000</div> <!--最终显示的值是 【1,200,000.00】千分位 --> <div v-format="'¥#,##0.00'">1200000</div> <!--最终显示的值是 【¥1,200,000.00】前缀 --> <div v-format="'0.00E+00'">1200000</div> <!--最终显示的值是 【1.20E+06】科学计数法,有占位符 --> <div v-format="'0.##E+##'">1200000</div> <!--最终显示的值是 【1.2E+6】科学计数法,无有占位符 --> <div v-format="'0000-00-00'">20180512</div> <!--最终显示的值是 【2018-05-12】改变格式--> <div v-format="'000-0000-0000'">13812345678</div> <!--最终显示的值是 【138-1234-5678】手机号--> <div v-format="'YYYY-MM-DD'">1562838244</div> <!--最终显示的值是 【2019-07-11】时间--> <div v-format="'??/??'">0.28</div> <!--最终显示的值是 【7/25】两位数分母的近似分数--> <div v-format="'?/?'">0.28</div> <!--最终显示的值是 【2/7】一位数分母的近似分数-->

格式编码是一套完整的声明逻辑,可以通过组合扩展无限的显示方式,下面有完整的讲解,如果您觉得复杂,也可以有多种简单的使用方式。

1、excel里copy

您可以在excel里copy过来您需要的格式编码,就像文章开头的图片一样,剩下的就交给vue-text-format去做就好了。excel中功能的位置,单击“格式”菜单中的“单元格”命令,然后单击“数字”选项卡。选完想要的格式,切换到自定义就会出现它的格式。

2、常用代码事例

在后面的讲解中,都给了一些demo,通过copy和简单的组装这些demo,就能解决绝大部分问题。

格式编码介绍

如果你做一些更定制的格式,就需要了解一下格式编码声明,当然也可以看任何一篇excel自定义格式的文章

1、【 # 】数字占位符

只显有意义的零而不显示无意义的零。小数点后数字如大于”#”的数量,则按”#”的位数四舍五入。

3、【 ? 】数字占位符

在小数点两边为无意义的零添加空格,以便当按固定宽度时,小数点可对齐,另外还用于对不等到长数字的分数
例:代码:【??.??】12.121 显示为【12.12】
例:代码:【???.???】12.121 显示为【 12.121】左侧有一个填充空格
例:代码:【???.????】12.121 显示为【 12.121 】左右各一个填充空格

11、【 [颜色] 】

用指定的颜色显示字符。可有八种颜色可选:红色、黑色、黄色,绿色、白色、兰色、青色和洋红。
例:代码:“[青色];[红色];[黄色];[兰色]”。显示结果为正数为青色,负数显示红色,零显示黄色,文本则显示为兰色
[颜色N]:是调用调色板中颜色,N是0~56之间的整数。
例:代码:“[颜色3]”。单元格显示的颜色为调色板上第3种颜色。

常用日期和时间代码,绑定的是10位或13位的时间戳
“YYYY”或“YY”:按四位(1900~9999)或两位(00~99)显示年

“MM”或“M”:以两位(01~12)或一位(1~12)表示月。

“DD”或“D”:以两位(01~31)或一位(1~31)来表示天。

例:代码:“YYYY-MM-DD”。2005年1月10日显示为:“2005-01-10”

例:代码:“YY-M-D”。2005年10月10日显示为:“05-1-10”

“AAAA”:日期显示为星期。

“H”或“HH”:以一位(0~23)或两位(01~23)显示小时

“m”或“mm”:以一位(0~59)或两位(01~59)显示分钟

“s”或“ss”:以一位(0~59)或两位(01~59)显示秒