如何设置字符串中特定字母的样式？

Question

Let's assume that I receive a response from the API that contains a summary of the last matches of a given team.

Example response: LLWWWWLWDWDWLW

I want it to be in my div in specific style.

L should be stylized, its background should be red (square shape) and W should have a green background . The entire statement should be minimally separated from each other.

User has the option to change the team to check its recent matches.

I'm using Vue.js

Answer 1

One quick solution with v-for :

 const mapColors = new Map([['W', 'green'], ['L', 'red'], ['D', 'yellow']]) const app = Vue.createApp({ data() { return { matches: [{team: 'team 1', games: 'LLWWWWLWDWDWLW'}, {team: 'team 2', games: 'WWWWLWDLLWWWDW'}] }; }, methods: { setColor(c) { return mapColors.get(c) } } }) app.mount('#demo')

 .green { background: limegreen; }.red { background: lightcoral; }.yellow { background: gold; }.games { width: 1.2em; display: inline-block; text-align: center; margin: .1em; }.match { margin-right: .5em; font-weight: 600; }

 <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div v-for="(match, idx) in matches":key="idx"> <span class="match">{{ match.team }}</span> <span v-for="(game, i) in match.games":key="i"> <span class="games":class="setColor(game)"> {{ game }} </span> </span> </div> </div>