Svelte的v-show替代方案

Question

情况是，我在获取请求时显示Loading组件。我使用store将$loading设置为true，内部条件是Loading组件。问题是Loading组件似乎需要一些时间才能显示。感觉/看起来原因是Loading组件的重新渲染。所以，我在Svelte中寻找类似v-show的东西，但在Docs中找不到。(如果有，不要生气，告诉我就好了。(

有人能帮我处理这个案子吗？

Answer 1

将其包装在{#if someCondition}块中，或在元素上添加hidden={!someCondition}属性。

Answer 2

如果您想要一个在条件更改时不重新呈现的HTML块，这里有一个简单的解决方案：

<script>
// Show.svelte
export let show = true;
</script>
<div class:hide={!show}>
<slot />
</div>
<style>
.hide {
display: none !important;
}
</style>

然后使用Show组件创建该块：

<script>
import Show from "Show.svelte";
let show = true;
</script>
<button on:click={() => { show = !show}}>
Click to Show/Hide Content
</button>
<Show {show}>
<div>Content</div>
</Show>

我已经将Show组件作为npm包https://www.npmjs.com/package/svelte-show发布