时间戳

首页 > 解决方案 > Svelte 条件元素类报告为语法错误

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

问题描述

我正在if根据Svelte Guide 为 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=创建单独的块，但这是大量的工作。

标签： javascriptcsssvelte

解决方案

块（{#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}and data=first={index === 0}，以及基于[data-selected=true]选择器的样式。

推荐阅读