斯维尔特Svelte是否有等同于v-html的东西？

编程问答 2022-08-13

问题描述

我最近接触过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>

非常感谢您的帮助，祝您生活愉快！

解决方法

据我所知，Svelte内置的HTML属性没有提供类似于Vue的指令。但是，使用actions构建自己的等效指令非常容易。

要模拟Vue的v-html和v-text的功能，您可以返回一个更新功能，该功能会更改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文本样式操作的更完整示例。

,

您可以使用while True: new_item = input("Add stock ticker > ").upper() if new_item == "STOP": break new_value = input("What is value of {} > ".format(new_item)) portfolio_list.append([new_item,int(new_value)]) 。因此，您可以执行{@html variableName}而不是<span v-html="rawHTML"></span>。如果<span>{@html rawHTML}</span>发生变化，它是反应性的。

sveltesvelte-3web