Price 商品价格

介绍

用来对商品价格数值的小数点前后部分应用不同样式,还支持人民币符号、千位分隔符、设置小数点位数等功能。

安装

  1. import { createApp } from 'vue';
  2. import { Price } from '@nutui/nutui';
  3. const app = createApp();
  4. app.use(Price);

代码示例

基本用法

  1. <nut-price :price="1010" :need-symbol="false" :thousands="true" />

有人民币符号,无千位分隔

  1. <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />

带人民币符号,有千位分隔,保留小数点后三位

  1. <nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />

异步随机变更

  1. <nut-price :price="price" :decimal-digits="3" :need-symbol="true" :thousands="true" />
  1. setup() {
  2. const price = ref(0);
  3. setInterval(() => {
  4. price.value = Math.random()*10000000;
  5. }, 1000);
  6. return {
  7. price
  8. };
  9. }

Prop

字段说明类型默认值
price价格数量Number0
need-symbol是否需要加上 symbol 符号Booleantrue
symbol符号类型String¥
decimal-digits小数位位数Number2
thousands是否按照千分号形式显示Booleanfalse

Price  价格组件 - 图1