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：你能舉個例子，你必須做這樣的事情嗎？ 我對它的需求非常感興趣。