价格拆分为点前面字号大,点后面字号小
完整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!