首页 > 其他 > 详细

Svelte 的“属性速记”

时间:2021-09-10 05:45:02      阅读:33      评论:0      收藏:0      [点我收藏+]

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=""  /> -->

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

3 总结

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

4 参考

Svelte 的“属性速记”

原文:https://www.cnblogs.com/aisowe/p/15245470.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!