价格拆分为点前面字号大，点后面字号小

价格拆分为点前面字号大，点后面字号小

完整demo

<template>
<div>
    <p class="txt">
        <span v-html="price(item.productPrice)" class="price"></span>
        <span class="priceOld"> {{item.priceOld}} </span>
    </p>
</div>
</template>

<script>
export default {
    computed:{
        price(){
            return (item)=>{
                const price=item.split('.')
                const p1=price[0]
                const p2=price[1]||'00'
                return `<b>￥</b><b style="font-size:26px">${p1}</b>.${p2}`
            }
        }
    },
    data() {
        return {
            item: {
                productPrice: '100.99',
                priceOld: '200.99'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.txt {
    .price {
        color: #FF0D0D;
        font-size: 14px;
    }

    .priceOld {
        color: #C4C4C4;
        text-decoration: line-through;
        font-size: 12px;
        margin-left: 4px;
    }
}
</style>

注意事项

字体放大只能使用style不能使用class。有知道原因的大神欢迎指导。

如果觉得有用，请点赞收藏一键三连让更多的同行少走弯路，祝所有同行朋友，程序没bug！