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

* **抖音：**<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

然后它除了格式化的功能

它还提供了一些运算功能

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/fen-xiang-yi-ge-jinezhan-shi-zu-jian-de-sheng-ji-ban.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.