Svelte 中是否有等效的“v-html”？

Question

我最近使用了 Svelte，并用它编写了一些代码。我一直在做

<script>
  let title = "Amazing title"
</script>

<h1>{ title }</h1>

将 html 元素的完整值设置为变量时，但我想知道是否有更好的方法来完成此操作，例如 Vue JS 中的 v-html

<template>
  <h1 v-html="title" />
</template>

<script>
export default {
  data() {
    return {
      title: "Amazing title"
    }
  }
}
</script>

非常感谢你的帮助，祝你今天愉快！

Answer 1

据我所知，Svelte 中没有任何内置的 HTML 属性提供像 Vue 这样的指令。但是使用 actions.

构建您自己的等效指令非常容易

要模拟 Vue 的 v-html 和 v-text 的功能，您可以 return 一个更新函数来更改 js 文件中的 innerHTML 或 innerText：

// html.js
export function html(node, content) {
node.innerHTML = content
return {
    update(content) {
        node.innerHTML = content
    }
  }
}

然后在要替换其内容的元素上使用它：

<!-- App.svelte -->
<script>
  import { html } from './html.js'
  let content = `<p>Content</p>`
</script>

<p use:html={content} />

这里有一个 REPL 显示了一个更完整的示例，其中还包含 v-text 样式操作。

Answer 2

您可以使用 {@html variableName}。因此，您可以 <span>{@html rawHTML}</span> 而不是 <span v-html="rawHTML"></span>。如果 rawHTML 发生变化，它是反应性的。

Is there a `v-html` equivalent in Svelte?