使用到了lodash插件
uniapp 使用lodash
lodash根据separator 拆分字符串string
es6 js判断字符串是否包含指定字符
使用实例
<price price="10.11"></price>
组件代码
<template>
<div class="price">
<div class="unit">¥</div>
<div class="price">{{integer}}</div>
<div class="Point">{{decimal}}</div>
</div>
</template>
<script>
import _ from 'lodash'
export default {
data() {
return {
show: false
}
},
props: {
price: {
type: String,
default () {
return '10.11'
}
}
},
computed: {
integer: function() {
var price = 0
if (String(this.price).includes('.')) {
price = _.split(this.price, '.', 2)[0];
} else {
price = this.price
}
return price
},
decimal: function() {
var price = 0
if (String(this.price).includes('.')) {
price = '.' + _.split(String(this.price), '.', 2)[1];
} else {
price = ''
}
return price
},
},
methods: {
chooseImage() {
},
}
}
</script>
<style scoped lang="scss">
.price {
display: flex;
justify-content: flex-start;
align-items: flex-end;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.unit {
font-family: PingFangSC-Medium;
font-size: 24rpx;
color: #EF4034;
text-align: center;
font-weight: 500;
line-height: 20rpx;
}
.price {
font-family: PingFangSC-Medium;
font-size: 36rpx;
color: #EF4034;
font-weight: 500;
line-height: 30rpx;
}
.Point {
font-family: PingFangSC-Medium;
font-size: 24rpx;
color: #EF4034;
font-weight: 500;
line-height: 20rpx;
}
}
</style>