Svelte条件元素类报告为语法错误

Question

我正在根据Svelte指南为if块制作if块。这看起来很简单，但Svelte认为这是一个语法错误：

[!] (svelte plugin) ParseError: Unexpected character '#'
publicjstemplatesworks.html
3:     <div class="slides js_slides">
4:       {#each works as work, index}
5:         <div class="js_slide {#if index === currentIndex }selected{/if} {#if index === 0 }first{/if}">
^
6:           <img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
7:         </div>

为什么{#if index === currentIndex }不被认为有效？我如何在Svelte做条件测试？

我不能为每个可能的结果创建单独的class=块，但这是一项巨大的工作。

Answer 1

块({#if...、{#each...等(不能在属性中使用，它们只能定义标记的结构。

相反，惯例是使用三元表达式。。。

<div class="
js_slide
{index === currentIndex ? 'selected' : ''}
{index === 0 ? 'first' : ''}
">
<img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
</div>

或者使用助手：

<!-- language: lang-html -->
<div class="js_slide {getClass(work, index, currentIndex)}">
<img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
</div>

有些人更喜欢做data-selected={index === currentIndex}和data=first={index === 0}之类的事情，而选择基于[data-selected=true]选择器的样式。

Answer 2

由于Svelte 2.13，您也可以进行

<div class:selected={index === currentIndex}>...</div>

请参阅https://svelte.dev/docs#class_name

Answer 3

如中所述https://svelte.dev/docs#class_name，它需要额外的JS变量来操作，如果在类内有其他

这里有一个例子，其中每个循环从a迭代到b，当如果为true时，css将应用

{#each Array.from(Array(b+1).keys()).slice(a) as i }
<div class="{ i===4 ? "border-l-2 border-blue-500" : ""}  p-3 space-y-4">
some sample text
</div>
{/each}

示例(1至15(：

{#each Array.from(Array(15+1).keys()).slice(1) as i }
<div class="{ i===3 ? "border-l-2 border-blue-500" : ""}  p-3 space-y-4">
some sample text
</div>
{/each}