Vue.js 2.0：应用使用 v-html 渲染的 vue 组件，编译标记

Question

我正在使用 VueJS 2.0

有什么方法可以使下面的呈现为链接？

这是我的Vue组件：

<template>
  <div v-html="markup"></div>
</template>

<script>
new Vue({
  data() {
    return {
      markup: '<router-link :to="{path: 'https://www.google.com'}"></router-link>',
    });
  },
});
</script>

在上面的例子中，我想动态导出一段标记，它包含一些动态内容，比如上面的router-link 。

但是该内容没有编译，并导出一个<router-link>标记作为最终结果。

有什么办法让它以编程方式编译？

我真正想要的是找到一种手动编译一段html的方法。 如果v-html不起作用，还有其他方法吗？

Answer 1

v-html仅适用于预编译的 html，它基本上是生成的文本。 如果您想动态更改内容，只需使用if条件根据prop呈现您的列表视图，该道具将告诉您列表视图的类型。

我认为将标记保存在您的数据库中不是一个好主意。 将一些设置保存在您的数据库中并基于这些设置来呈现必要的 html 会更方便。 （您的情况下的道具类型）。 也许如果你提供一个更具体的例子，一些建议会随之而来。 如您所见，答案基于您的router-link示例，我认为这不足以回答您的问题

Answer 2

鉴于您要呈现链接列表，一种方法可以是这样的：

<template>
  <router-link v-for="list in lists" :to="{path: list}"></router-link>
</template>

<script>
new Vue({
  data() {
    return {
      lists: ['https://www.google.com', 'https://www.stackoverflow.com']
    });
  },
});
</script>

编辑：

在动态组件的帮助下，您也可以使用以下方法。

 Vue.use(VueRouter) new Vue({ el: "#app", data: { dynamicComp: "router-link" }, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.2.0/vue-router.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> <div id="app"> somethind <component :is="dynamicComp" :to="{path: 'https://www.google.com'}"></component> </div>

Answer 3

我不认为你可以通过v-html指令来实例化 Vue 实例。 您必须覆盖默认值才能做到这一点，这需要付出很多努力。

如果您只想要动态链接，为什么不试试这个：

data: {
  menu: []
}

接着 ：

<router-link v-for="item in menu" :to="item.src">{{item.name}}</router-link>

PS：你能举个例子，你必须做这样的事情吗？ 我对它的需求非常感兴趣。