如何替换 vue.js 中的元素？

Question

这是我的代码：

window.onload = (event) => {
            new Vue({
                el: "#test",
                mounted: function() {
                    this.fetch();
                    setInterval(this.fetch, 60000);
                },
                data: function() {
                    return {
                        tracker: {
                            serverInfo: {
                                servername: ""
                            }
                        }
                    }                       
                },              
                methods: {
                    fetch() {
                        fetch("https://pt.dogi.us/ParaTrackerDynamic.php?ip=pug.jactf.com&port=29071&skin=JSON")
                        .then(response => response.json())
                        .then(data => {this.tracker = data});
                    },                  
                }       
            })
        }

<script src="https://unpkg.com/vue@2.4.4/dist/vue.min.js"></script>
<div id="test">

<span style="font-weight:bold">SERVER NAME:</span> {{tracker.serverInfo.servername}}

如何使用 vue.js 将 ^4Re^5fresh^11-PUG 输出元素替换为

<span style="font-weight:bold">SERVER NAME:</span> <span style="color:blue">Re</span><span style="color:cyan">fresh</span><span style="color:red">1-PUG</span>

其中 ^4 代表 <span style="color:blue"> 等等

最终结果应如下所示：image

Answer 1

使用此正则表达式拆分字符串：https://regex101.com/r/G2s23R/1

const regex = /(\^\d)([^\^]+)/gm;

// Alternative syntax using RegExp constructor
// const regex = new RegExp('(\^\d)([^\^]+)', 'gm')

const str = `^4Re^5fresh^11-PUG`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

那么，我相信你可以处理剩下的任务。

如何替换 vue.js 中的元素？

How can I replace element in vue.js?

vue.js

vuejs2