Svelte 的“属性速记”

1 前言

<h1>Hello, {name}</h1>，这种写法没问题；

<img src={src} alt="a image" />， 这种写法也没问题；

但类似“将变量绑定到同名属性上”这种操作是否有便捷写法呢？

2 正文

属性速记 是一种类似 ES6 对象赋值便捷方法的一种属性绑定便捷方法，看下代码就理解了：

<script>
  const alt = "李雷的图片";
  const src = "./avatar.png";

  // const imgInfo = { alt: alt, src: src }; // 这是原始写法

  // 强行演示对象属性修改的便捷写法，用于和“属性速记”做对比
  const imgInfo = { alt, src };
</script>

<div>
  {`这是${imgInfo.alt}: ${imgInfo.src}`}

  <!-- 这是原始写法 -->
  <!-- <img src="" alt="" /> -->

  <!-- 属性速记形式绑定动态属性 -->
  <img {src} {alt} />
</div>

3 总结

属性速记用在将变量绑定到同名属性上这一场景时，一切都是为了代码简洁。

4 参考

• https://www.sveltejs.cn/tutorial/dynamic-attributes