Question

就我而言，我正在使用v-html替换段落元素顶部的链接

请按如下所示查找代码段

 <p v-html="websiteHTML"></p>

websiteHTML包含：<a v-bind:href="google.com/">Google</a>

<p>标签是由Google呈现的，但是没有超链接来导航到https://www.google.com/

能帮您找到错误吗？

Answer 1

您包含在变量中的HTML字符串应该只是HTML，而不是Vue模板代码。当您尝试包含vue模板指令时，框架使用文字属性“ v-bind：href”而不是所需的“ href”将锚标记写入DOM中：

new Vue({
  el: '#app',
  data: {
    websiteHTMLNo: '<a v-bind:href="https://google.com/">Google</a>', // <-- won't work
    websiteHTMLYes: '<a href="https://google.com/">Google</a>'  // <-- do this instead
  },
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <p v-html="websiteHTMLNo"></p>
  <p v-html="websiteHTMLYes"></p>
</div>

（如果实际上 do 需要注入模板代码而不是纯HTML，则需要使用Vue.compile而不是v-html来解析它。）

Answer 2

如果您想在链接内传递变量。

const url: string = 'https://google.fr/'
const html: string = `<a href="${url}">Google</a>`

<p v-html="html"></p>

VueJS-无法使用v-html属性

2 个答案: