传递数据：单击 Svelte

问题描述

我正在构建一个带有翻转卡片的应用，每个卡片带有三个按钮。我需要在卡片背面单击的按钮中显示文本。我怎样才能在 svelte 中做到这一点？

<section class="front-side">
  <button aria-label="Pizza" on:click={flip}>PIZZA</button>
  <button aria-label="Donuts" on:click={flip}>DONUTS</button>
  <button aria-label="Hot Dogs" on:click={flip}>HOT DOGS</button>
</section>

<section class="back-side">
  Great! We like {data} too.
</section>

解决方法

这可以通过多种方式解决，但最简单的是 CSS 和 class directive。每当您点击其中一个选项时，只需切换 _uploadImage2 变量并将其绑定到包装卡片正面和背面的 div 上的同名类。

如果您想通知翻转组件的父级为每张卡片选择的选项，您可以发送点击卡片的数据并按照您认为合适的方式处理它。

这是 REPL 中的一个简化示例，CSS 几乎是从 W3 Schools tutorial on flip cards 中提取的，唯一的区别是 flipped 类内部具有转换而不是悬停作为触发器。

https://svelte.dev/repl/782718a4f2fe43e3b731822b54aaed78?version=3.38.3