Javascript 用Vue动态替换字符串的一部分

我想解决一个问题

我有一个基本上是HTML代码的字符串：

let htmlTitle = "<a href="/news/sky-sport-hd-in-italia-dal-18-novembr">Sky Sport HD in italia dal 18 novembre</a> | <a href="/news/ecco-il-genio-spagnolo-designer-di-moto-elettriche">News</a> | <a href="/news/lg-electronic-e-here-insieme-per-l-auto-connessa-e-autonoma">News</a>"

这是字符串引用的第一个内容的永久链接

当我更改输入字段时，我需要标题字符串适应我的更改，我不知道如何才能做到这一点

在我的标题字符串中，我可以有无限数量的锚定标记，但我只需要更改与slug匹配的

href

值

我需要这样的东西：

"<a href="{{ slug }}">Sky Sport HD in italia dal 18 novembre</a> | <a href="/news/ecco-il-genio-spagnolo-designer-di-moto-elettriche">News</a> | <a href="/news/lg-electronic-e-here-insieme-per-l-auto-connessa-e-autonoma">News</a>"

“||”

---

我可以使用计算值，但我的字符串可以使用所见即所得编辑器进行编辑，在那里我可以更改标题（“Sky Sport HD in italia dal 18 Novenbre”或“News”）。我只需要保持段塞对齐…

我想说，您需要使用一个计算值（）

字符串HtmlTile将是一个计算值

computed: {
    // ES6
    htmlTitle () {
        return `<a href="${this.slug}">Sky Sport HD in italia dal 18 novembre</a> | <a href="/news/ecco-il-genio-spagnolo-designer-di-moto-elettriche">News</a> | <a href="/news/lg-electronic-e-here-insieme-per-l-auto-connessa-e-autonoma">News</a>`
    }

    // ES5
    htmlTitle: funciton() {
        return "<a href='" + this.slug + "'>Sky Sport HD in italia dal 18 novembre</a> | <a href="/news/ecco-il-genio-spagnolo-designer-di-moto-elettriche">News</a> | <a href="/news/lg-electronic-e-here-insieme-per-l-auto-connessa-e-autonoma">News</a>"
    }
}

计算：{
//ES6
htmlTitle（）{
返回“||”`
}
//ES5
htmlTitle:function（）{
返回“| |”
}
}

使用监视程序和v-html。当您更改slug时，只需使用link更新变量 这里有一个例子

watch: {
  slug: function(val) {
    this.href = this.result;
  }
}

---

我编辑了解释为什么不能使用计算字符串的问题。标题是可编辑的。。。。

watch: {
  slug: function(val) {
    this.href = this.result;
  }
}