<template> <view class="carNo flex align_center"> <view class="prv">{{prv}}</view> <view class="other">{{other}}</view> </view> </template> <script> export default{ props: { val: { type: String, default: '' }, }, computed: { prv() { return this.val.substr(0,1) }, other(){ return this.val.substr(1,this.val.length) } }, } </script> <style lang="scss"> .carNo{ border: 1px solid #424D5E; border-radius: 4rpx 0 0 4rpx; overflow: hidden; font-size: 24rpx; .prv{ background-color: #424D5E; color: #FFFFFF; } >view{ padding: 2rpx 10rpx; } } </style>