如何在 Svelte 3 中拥有条件属性?

2024-01-04

有没有更简单的方法来编写以下复选框组件:

<script>
  export let disabled = false;
</script>

{#if disabled}
  <label class="checkbox" disabled>
    <input type="checkbox" {disabled} />
    <slot></slot>
  </label>
{:else}
  <label class="checkbox">
    <input type="checkbox" {disabled} />
    <slot></slot>
  </label>
{/if}

Having <label disabled="false">不可接受,因为 Bulma 有一个 CSS 类.checkbox[disabled].


disabled || null (or disabled || undefined)就可以解决这个问题:

<label class="checkbox" disabled={disabled || null}>
  <input type="checkbox" {disabled} />
  <slot></slot>
</label>

来自docs https://svelte.dev/docs#template-syntax-attributes-and-props:

... [包含属性,除非它们的值是nullish https://developer.mozilla.org/en-US/docs/Glossary/Nullish (null or undefined).

<input required={false} placeholder="This input field is not required">
<div title={null}>This div has no title attribute</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Svelte 3 中拥有条件属性? 的相关文章

随机推荐

  • 发送以 HTML 文件作为正文的电子邮件 (C#)

    如何使用 HTML 文件设置 MailMessage 的正文 只需设置邮件消息正文格式 http msdn microsoft com en us library system web mail mailmessage bodyformat
  • Scala 的“With”语句等效吗?

    也许是 Scala 学习者的闲思 但是 在我的修改中 我写了以下内容 n child size gt 0 n child filter isInstanceOf Text size 0 n 是 scala xml Node 但这并不重要 特
  • 对二维点数组进行排序以找出四个角

    您好 我有任何大小的二维点的集合 通过查找原点之间距离的最小值和最大值 我能够找出左上角和右下角点 但我无法找出顶部 右点和左下点 也许你可以使用cv approxPoly 找到二维点集的角点 然后您可以通过以下方式按您想要的任何顺序对点进
  • hibernate用于动态表创建

    我是一个 HIBERNATE 初学者 因为我需要创建其中包含动态字段的动态表 所以我选择使用 hibernate 据我了解 创建表需要一个类 其中包含类中定义的字段 如何根据具有所需字段的表动态生成类 我不确定我是否理解这个问题 标题是关于
  • Android使用EGL初始化openGL2.0上下文

    我想在Android上用本机代码进行离屏图像处理 所以我需要通过EGL在本机代码中创建openGL上下文 通过EGL 我们可以创建EGLSurface 我可以看到那里有三个选择 EGL WINDOW BIT EGL PIXMAP BIT E
  • 如何在 Visual Studio 2005/2008 中编译 Flex?

    我无法弄清楚这一点 我可以从 gnuwin32 下载 flex 2 5 4a 的 win32 二进制文件 但我想使用 Visual Studio 2005 构建最新版本 2 5 35 我想我可以在 cygwin 中构建 但其中的乐趣在哪里
  • Django 日志记录旋转文件不起作用

    所以我在 Django 日志记录到达时遇到了一些问题maxBytes尺寸 基本上 当发生这种情况时 文件似乎不会旋转并创建新文件 有人告诉我这可能与服务器的写入权限有关 但我不确定如何正确设置 以便 django 在旧日志文件已满时能够创建
  • 如何更改移动布局上的 Bootstrap 3 列顺序?

    我正在制作一个带有顶部固定导航栏的响应式布局 下面有两列 一列用于侧边栏 3 一列用于内容 9 在桌面上看起来像这样 navbar 3 9 When I resize移动navbar被压缩并隐藏 然后侧边栏堆叠在内容之上 如下所示 navb
  • 在Android中将位图的大小减小到某个指定的像素

    我想将 我的位图 图像尺寸减小到最大 640 像素 例如 我有尺寸为 1200 x 1200 px 的位图图像 如何将其减小到 640px 如果你传递位图width and height然后使用 public Bitmap getResiz
  • 通过 git URL 从 lerna 管理的 monorepo 安装包

    我在我的项目中使用纱线 我的项目有一个依赖项 它恰好是 lerna 维护的较大 monorepo 的子包 子包已更新但尚未发布 我需要未发布的代码 有没有办法通过git url安装lerna的子包 Thanks 如果您的问题是 如何通过 g
  • 如何实现记住我功能? [复制]

    这个问题在这里已经有答案了 可能的重复 为网站实施 记住我 的最佳方式是什么 https stackoverflow com questions 244882 what is the best way to implement rememb
  • HttpResponseMessage 内容不会显示 PDF

    我创建了一个 Web Api 它返回一个 HttpResponseMessage 其中内容设置为 PDF 文件 如果我直接调用 Web Api 它会很好地工作 并且 PDF 会在浏览器中呈现 response Content new Str
  • Spark - 使用不同的数据类型以编程方式创建模式

    我有一个由 7 8 个字段组成的数据集 这些字段的类型为 String Int 和 Float 我尝试使用以下方法通过编程方法创建架构 val schema StructType header split map column gt Str
  • Zend框架2访问模型类中的全局配置

    我有一个模型类 它不扩展任何核心 Zend 模块 该模型是从我之前的 Zend Framework 1 应用程序导入的 我可以通过将其转换为命名空间来调用它的方法 我遇到的问题是在定义的方法中读取全局配置 对于控制器 我可以使用以下代码访问
  • R 中的 readHTMLTable 仅从篮球参考页面返回前两个表

    我正在尝试从篮球参考网站抓取球队统计网页 但当我使用 readHTML 时 它只会带回前两个表格 我的 R 代码如下所示 url http www basketball reference com leagues NBA 2015 html
  • 使用 GCD 同步 Swift 3 中的属性

    我看了今年的WWDCGCD最近谈话 我认为有一个代码片段有问题 这是关于使用以下方法使属性成为线程安全的调度队列 class MyObject private var internalState Int private let intern
  • 在 for 循环中声明匿名结构,clang 无法编译

    在 for 循环中声明匿名结构的代码在 gcc 中使用 std c99 gnu99 工作得很好 for struct int foo int bar i 0 i foo lt 10 i foo 但是 当我切换到 clang 时 我收到了错误
  • 使用 Hadoop/MapReduce 查找连接的组件

    我需要为一个巨大的数据集找到连接的组件 图是无向的 一个显而易见的选择是 MapReduce 但我是 MapReduce 的新手 我没有足够的时间来学习它并自己编写代码 我只是想知道是否有任何现有的 API 可以解决这个问题 因为这是社交网
  • Qt Creator 编译器配置问题

    我刚刚开始学习 C 并遇到了 Qt Creator 我已经将它与内置的 MinGW 编译器一起安装了 但是我无法让我的项目 构建并运行 我在下面附上了一些屏幕截图 谢谢您的帮助 最后一张图片显示了我可以选择的两个自动检测套件 我尝试创建自己
  • 如何在 Svelte 3 中拥有条件属性?

    有没有更简单的方法来编写以下复选框组件 if disabled