Svelte 从入门到放弃——样式，原来Svelte，还是未能征服我的心

2023-12-15 03:14:34

Svelte 的样式支持

Svelte 在样式方面的处理方式与 Vue 较为接近，直接内置了对样式类操作的支持。

在 Svelte 中，可以使用 class 属性来为元素添加样式类，可以使用 :class 指令来动态地添加或移除样式类。

例如，以下代码为 <div> 元素添加了 active 样式类：

<div class="active">...</div>

以下代码使用 :class 指令来动态地为 <div> 元素添加或移除 active 样式类：

<div :class="{ active: is_active }">...</div>

Svelte 与 Vue 在样式支持方面的差异

Svelte 和 Vue 在样式支持方面有一些差异。

首先，Svelte 不支持 Vue 中的 v-bind:class 指令。

其次，Svelte 中的 :class 指令只能添加或移除样式类，而 Vue 中的 v-bind:class 指令还可以设置样式类的值。

例如，以下代码使用 Vue 中的 v-bind:class 指令来设置 <div> 元素的 color 样式：

<div v-bind:class="{ active: is_active, 'text-red': is_error }">...</div>

Svelte 中无法使用 :class 指令来实现同样的效果，需要使用 JavaScript 来操作样式类。

例如，以下代码使用 JavaScript 来设置 <div> 元素的 color 样式：

<script>
  let is_active = false;
  let is_error = false;

  function set_color() {
    if (is_active) {
      document.querySelector('div').classList.add('text-green');
    } else if (is_error) {
      document.querySelector('div').classList.add('text-red');
    } else {
      document.querySelector('div').classList.remove('text-green');
      document.querySelector('div').classList.remove('text-red');
    }
  }
</script>

<div on:click={set_color}>...</div>