Я недавно взялся за Svelte и написал с его помощью пару вещей. Я просто делал

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

<h1>{ title }</h1>

При установке полного значения элемента html для переменной, но я хотел бы знать, есть ли лучший способ сделать это, например v-html в Vue JS

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

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

Большое спасибо за вашу помощь и хорошего дня!

0
Coding Carter 30 Авг 2020 в 21:16

2 ответа

Лучший ответ

Вы можете использовать {@html variableName}. Поэтому вместо <span v-html="rawHTML"></span> вы можете использовать <span>{@html rawHTML}</span>. Он является реактивным, если rawHTML изменяется.

1
Etienne 1 Сен 2020 в 17:39

Насколько мне известно, в Svelte нет ничего встроенного в атрибут HTML, обеспечивающего директиву вроде Vue. Но очень легко создать собственные эквивалентные директивы, используя действия.

Чтобы имитировать функциональность v-html и v-text Vue, вы можете вернуть функцию обновления, которая изменяет innerHTML или innerText в файле js:

// 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-текста как хорошо.

1
JHeth 31 Авг 2020 в 02:59