svelte - Sveltejs 有条件地渲染 html 属性

Question

如何使用 svelte 有条件地渲染 html 元素上的属性？需要明确的是，我不是在谈论条件值，而是属性存在本身。

例如，我只想自动聚焦此输入列表中的第一项：

{{#each codeInputs as codeInput, index}}
  <input bind:value="inputCodes[index]" type="text" autofocus> 
{{/each}}

该属性autofocus应该仅适用于第一项。我可以使用 index 来检测第一项，但autofocus="{{index===0}}"呈现autofocus="true"or "false"，所以这不是我需要的。

另见https://github.com/sveltejs/svelte/issues/259

Answer 1

试试看——它确实有效。当 Svelte看到类似的内容时，它不会设置属性autofocus='{{xyz}}，它会设置属性——属性必须是字符串（这是无用的），而属性可以是布尔值。