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

Question

我正在根据 Svelte Guide for if blocks 创建一个 if 块。看起来很简单，但 Svelte 认为这是一个语法错误：

[!] (svelte plugin) ParseError: Unexpected character '#'
public\js\templates\works.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变量来操作if else inside class

这是一个示例，其中 each 循环从 a 迭代到 b 并且当如果是真，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}

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

Svelte conditional element class reported as a syntax error

javascript

css

svelte