> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/fen-xiang-yi-ge-jinezhan-shi-zu-jian-de-sheng-ji-ban.md).

# 分享一个金额展示组件的升级版

* **抖音：**<https://v.douyin.com/kCh1QRW/>
* **B站：**<https://www.bilibili.com/video/BV1914y1T7iV/>

> **demo预览：**
>
> <https://sunzsh.github.io/vue-demos/#/xs-money>
>
> **代码：**
>
> <https://github.com/sunzsh/vue-el-demo/blob/master/src/views/xs-money.vue>
>
> <https://github.com/sunzsh/vue-el-demo/blob/master/src/components/money.vue>

之前这期视频给大家分享过

用这种方法去格式化金钱啊

但是呢

我发现他还是有一些不好用的地方

比如说：因为这是一个完整的自助串

所以如果我想让这个人民币的符号

比正常的

后边字体小一点的话

他就不太好处理

第二个就是我复制的时候

他总是带有逗号

还需要手动删掉

所以呢今天给大家推荐另一个方法哈

也是我封装的一个组件

就是这个

money然后写一个:value=price

我把这个注释掉

大家看他默认这个符号就会小一点

然后后边的数字呢

单击就可以全部选中了

这时候复制它是带有逗号的

但是我双击一下大家看逗号就没了

这时候再复制（粘贴）它就可以了

这个我们也可以通过属性来控制

这里边我封装了很多属性

比如说这个人民币符号

默认是不可以选中的

然后是否显示货币符号

然后货币符号可以指自己指定

包括小数点的精度

然后其他属性我就不挨个讲了

大家一看就明白

这个组件呢

我还是会放到这个vue-demo里

只是呢大家如果用的话

需要自己装一下这个currency的插件

这个插件呢上回我也提到过

就是这个特别轻量的1.14KB

然后它除了格式化的功能

它还提供了一些运算功能

可以避免这种小数点的精度问题