就像你可以使用大括號來控制文字一樣,你也可以使用它們來控制元素屬性。
我們的圖片缺少 src
- 讓我們加入一個
App
<img src={src} />
這樣好多了。但是如果你將滑鼠懸停在編輯器中的 <img>
上,Svelte 會給出一個警告
`<img>` element should have an alt attribute
在建構 Web 應用程式時,確保它們對盡可能廣泛的使用者群體是可存取的,這一點非常重要,包括視力或運動障礙人士,或者沒有強大硬體或良好網際網路連線的人。可存取性(縮寫為 a11y)並不總是容易做對,但 Svelte 會在您編寫無法存取的標記時發出警告來幫助您。
在這種情況下,我們缺少 alt
屬性,該屬性描述了使用螢幕閱讀器的人,或者網際網路連線速度慢或不穩定的無法下載圖片的人的圖片。讓我們加入一個
App
<img src={src} alt="A man dances." />
我們可以在屬性內使用大括號。試著將它改為 "{name} dances."
— 記得在 <script>
區塊中宣告一個 name
變數。
簡寫屬性
擁有一個名稱和值相同的屬性並不罕見,例如 src={src}
。 Svelte 為這些情況提供了方便的簡寫
App
<img {src} alt="{name} dances." />
1
2
3
4
5
6
<script>
let src = '/tutorial/image.gif';
</script>
<img />