阅读(3031) (0)

Svelte 动态属性

2023-02-20 15:13:28 更新

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

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

<img src={src}>

那更好。但是 Svelte 给了我们一个警告:

A11y: <img> element should have an alt attribute

在构建 Web 应用程序时,重要的是要确保它们可供尽可能广泛的用户群访问,包括(例如)视力或运动受损的人,或者没有强大硬件或良好互联网连接的人。可访问性(缩写为 a11y)并不总是很容易做到正确,但如果您编写了不可访问的标记,Svelte 会通过警告来帮助您。

在这种情况下,我们缺少 ​alt​ 属性,该属性为使用屏幕阅读器的人或互联网连接速度慢或不稳定而无法下载图像的人描述图像。让我们添加一个:

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

我们可以在属性中使用大括号。尝试将其更改为​"{name} dances"​。 — 记得在 ​<script>​ 块中声明一个 ​name​ 变量。

属性简写

名称和值相同的属性并不少见,例如 ​src={src}​。 Svelte 为我们提供了这些情况的便捷简写:

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