HTML2.0:应用使用v- Vue.js呈现的vue组件，编译标记
HTML2.0:应用使用v- Vue.js呈现的vue组件，编译标记
提问于 2017-02-08 06:28:32
我使用的是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不能工作，还有其他方法吗？
回答 3
Stack Overflow用户
发布于 2017-02-08 09:15:08
v-html只适用于预编译的html，它基本上是生成的文本。如果您希望动态更改内容，只需基于prop使用if条件呈现您的列表视图，它将告诉您列表视图的类型。
我不认为将标记保存在数据库中是个好主意。在db中保存一些设置并根据这些设置来呈现必要的html会更方便。(在您的案例中为道具类型)。也许如果你提供一个更具体的例子，一些建议会随之而来。如您所见，答案是基于您的router-link示例的，我认为这不足以回答您的问题
Stack Overflow用户
发布于 2017-02-08 07:00:36
假设您想要呈现一个链接列表，一种方法可能如下所示：
<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>编辑：
在dynamic components的帮助下，您也可以使用下面这样的方法。
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>
Stack Overflow用户
发布于 2017-02-08 08:41:08
我不认为你可以通过v-html指令来实例化Vue实例。要做到这一点，您必须覆盖默认设置，这将需要大量的工作。
如果你只想要动态链接，为什么不试试这个：
data: {
menu: []
}然后：
<router-link v-for="item in menu" :to="item.src">{{item.name}}</router-link>PS:你能举个例子说明你必须做这样的事情吗？我真的对它的需求很感兴趣。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42106153
复制相关文章
相似问题
腾讯云开发者
