就像可以使用花括号控制文本一样,也可以使用花括号控制元素属性。

我们的图像缺少一个 src 属性,让我们添加一个吧:

<img src={src}>

看上去不错,但是 Svelte 给出了一条警告信息:

A11y: <img> element should have an alt attribute

在构建 web 应用程序时,确保它们能够为最广泛的用户群 可用(accessible) 很重要,包括视力或行动受限的用户,或者没有强大硬件或良好互联网连接的用户。可访问性(Accessibility,缩写为 a11y)方面的问题并不总是容易纠正的,但是如果编写的标签不具有良好的可访问性,Svelte 会通过警告来帮你改正。

在上面这个例子中,我们缺少 alt 属性,该属性用于描述这个标签的用途,以便让使用屏幕阅读器的用户,或网络连接缓慢、不稳定的用户了解这幅图像的用途。接下来就让我们完善一下吧:

<img src={src} alt="A man dances.">

我们可以在属性 内部 使用花括号*。试着改为 "{name} dances." — 不要忘了在 <script> 块内声明 name 变量。

速记属性

名称和值相同的属性并不少见,比如 src={src}。Svelte 为这些情况提供了一个方便的速记法:

<img {src} alt="A man dances.">


		
loading editor...

Console

loading Svelte compiler...


		
loading editor...

Compiler options

result = svelte.compile(source, {
generate:
});


		
loading editor...