如何設置字符串中特定字母的樣式？

Question

假設我收到來自API的回復，其中包含指定球隊最近比賽的摘要。

響應示例： LLWWWWLWDWDWLW

我希望它以特定的樣式出現在我的 div 中。

L 應該是程式化的，它的背景應該是紅色（方形） ，W 應該有綠色背景。 整個語句應盡量彼此分開。

用戶可以選擇更改球隊以查看最近的比賽。

我正在使用Vue.js

Answer 1

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>