Price 商品价格
介绍
用来对商品价格数值的小数点前后部分应用不同样式,还支持人民币符号、千位分隔符、设置小数点位数等功能。
安装
import { createApp } from 'vue';
import { Price } from '@nutui/nutui';
const app = createApp();
app.use(Price);
代码示例
基本用法
<nut-price :price="1010" :need-symbol="false" :thousands="true" />
有人民币符号,无千位分隔
<nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
带人民币符号,有千位分隔,保留小数点后三位
<nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
异步随机变更
<nut-price :price="price" :decimal-digits="3" :need-symbol="true" :thousands="true" />
setup() {
const price = ref(0);
setInterval(() => {
price.value = Math.random()*10000000;
}, 1000);
return {
price
};
}
Prop
字段 | 说明 | 类型 | 默认值 |
---|---|---|---|
price | 价格数量 | Number | 0 |
need-symbol | 是否需要加上 symbol 符号 | Boolean | true |
symbol | 符号类型 | String | ¥ |
decimal-digits | 小数位位数 | Number | 2 |
thousands | 是否按照千分号形式显示 | Boolean | false |