Vue에서 클래스 이름을 동적으로 추가하는 방법에 대한 자세한 설명

구성 요소에 동적 클래스 이름을 추가할 수 있다는 것은 매우 강력한 기능입니다. 이를 통해 사용자 정의 테마를 작성하고, 구성 요소의 상태에 따라 클래스를 추가하고, 스타일에 따라 구성 요소의 다양한 변형을 작성하는 것이 더 쉬워졌습니다.

동적 클래스 이름을 추가하는 것은 구성 요소에 prop :class="classname"을 추가하는 것만큼 쉽습니다. classname이 평가하는 것은 무엇이든 구성 요소에 추가된 클래스 이름이 됩니다. :class="classname"一样简单。无论classname的计算结果是什么，都将是添加到组件中的类名。

当然，对于Vue中的动态类，我们可以做的还有很多。在本文中，我们将讨论很多内容：

• 在 Vue 中使用静态和动态类
• 如何使用常规的 JS 表达式来计算我们的类
• 动态类名的数组语法
• 对象语法
• 快速生成类名
• 如何在自定义组件上使用动态类名

静态和动态类

在Vue中，我们可以向组件添加静态类和动态类。

静态类是那些永远不会改变的乏味类，它们将始终出现在组件中。另一方面，我们可以在应用程序中添加和删除动态类。

添加静态类与在常规HTML中所做的是完全相同的

<template>
  <span class="description">
    This is how you add static classes in Vue.
  </span>
</template>

动态类非常类似，但是我们必须使用Vue的特殊属性语法v-bind，以便将 JS 表达式绑定到我们的类:

<template>
  <span v-bind:class="&#39;description&#39;">
    This is how you add static classes in Vue.
  </span>
</template>

这里你会注意到，我们必须在动态类名周围添加额外的引号。

这是因为v-bind语法接受我们作为 JS 值传递的任何内容。添加引号可以确保Vue将其视为字符串。

Vue还有一个v-bind的简写语法:

<template>
  <span :class="&#39;description&#39;">
    This is how you add static classes in Vue.
  </span>
</template>

真正奇妙的是，您甚至可以在同一个组件上同时拥有静态类和动态类。静态类用于我们知道不会更改的内容，比如定位和布局，动态类用于主题之类的：

<template>
  <span    class="description"
    :class="theme"
  >
    This is how you add static classes in Vue.
  </span>
</template>

export default {
  data() {    return {
      theme: &#39;blue-theme&#39;,
    };
  }
};
----------------------------------------
.blue-theme {
  color: navy;
  background: white;
}

在本例中，theme是包含我们将应用的类名的变量。

有条件的类名

由于v-bind可以接受任何 JS 表达式，因此我们可以用它做一些非常酷的事情。我最喜欢的是在模板中使用三元表达式，它往往是非常干净和可读的。

<template>
  <span    class="description"
    :class="darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>

如果darkMode为true，则将dark-theme用作我们的类名。 否则，我们选择light-theme。

使用数组语法

如果需要动态添加许多不同的类，可以使用数组或对象。这两种方法都很有用，我们先来看数组方式。

因为我们只是在计算一个 JS 表达式，所以可以将我们刚刚学到的表达式与数组语法结合起来

<template>
  <span    class="description"
    :class="[
      fontTheme,
      darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;,
    ]"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>

我们使用数组在这个元素上设置两个动态类名。fontTheme的值是一个类名，它将改变字体的外观。在前面的例子中，我们仍然可以使用darkMode变量在dark-theme和light-theme之间切换。

使用对象语法

我们甚至可以使用对象来定义动态类的列表，这给了我们更多的灵活性。

对于任何值为真的键/值对，它将把键用作类名。让我们看一个对象语法的例子:

<template>
  <span    class="description"
    :class="{
      &#39;dark-theme&#39;: darkMode,
      &#39;light-theme&#39;: !darkMode,
    ]"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>

我们的对象包含两个键:dark-theme和light-theme。与我们之前实现的逻辑类似，我们希望基于darkMode的值在这些主题之间切换。

当darkMode为 true 时，会把dark-theme作为一个动态类名应用于我们的元素。但是light-them不会被应用，因为!darkMode 值为false。

现在我们已经介绍了向Vue组件动态添加类的基础知识。那么如何使用自己的自定义组件来做到这一点？

与自定义组件一起使用

假设我们在 app 中有一个自定义组件

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
  />
</template>

如果我们要动态添加一个将更改主题的类，我们该怎么办？其实很简单。

我们只需要像以前那样添加:class属性

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
    :class="darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;"
  />
</template>

之所以起作用，是因为Vue直接在MovieList的根元素上设置类。

在组件上设置props时，Vue会将这些props与组件在其props部分中指定的props进行比较。 如果有匹配项，它将作为常规props传递。 否则，Vue会将其添加到根DOM元素中。

在这里，由于MovieList没有指定class属性，因此Vue知道应该在根元素上进行设置。

不过，我们可以用动态类名做一些更高级的事情。

快速生成类名

我们已经介绍了许多动态添加或删除类名的不同方法。但是动态生成类名本身又如何呢？

假设有一个Button

물론 Vue의 동적 클래스로 할 수 있는 일이 훨씬 더 많습니다. 이 글에서는 다음과 같은 내용을 많이 다룰 것입니다: 🎜

• Vue에서 정적 및 동적 클래스 사용
• 일반 JS 표현식을 사용하여 클래스를 평가하는 방법
• 배열 구문 동적 클래스 이름의 경우
• 객체 구문
• 빠른 클래스 이름 생성
• 사용자 정의 구성 요소에서 동적 클래스 이름을 사용하는 방법
ul>

정적 및 동적 클래스

🎜Vue에서는 정적 클래스와 동적 클래스를 구성 요소에 추가할 수 있습니다. 🎜🎜정적 클래스는 결코 변하지 않는 지루한 클래스이며 항상 구성 요소에 존재합니다. 반면에 애플리케이션에서 동적 클래스를 추가하고 제거할 수 있습니다. 🎜🎜정적 클래스를 추가하는 것은 일반 HTML에서 수행하는 것과 정확히 동일합니다. 🎜

<template>
  <span
    class="description"
    :class="theme"
  >
    This is how you add static classes in Vue.
  </span>
</template>


export default {
  data() {
    return {
      theme: &#39;blue-theme&#39;,
    };
  }
};

.blue-theme {
  color: navy;
  background: white;
}

🎜동적 클래스는 매우 유사하지만 JS 표현식을 바인딩하려면 Vue의 특수 속성 구문 v-bind를 사용해야 합니다. 우리 클래스: 🎜

<template>
  <button
    @click="$emit(&#39;click&#39;)"
    class="button"
    :class="theme"
  >
    {{ text }}
  </button>
</template>

export default {
  props: {
    theme: {
      type: String,
      default: &#39;default&#39;,
    }
  }
};

.default {}

.primary {}

.danger {}

🎜여기서 동적 클래스 이름 주위에 추가 따옴표를 추가해야 한다는 것을 알 수 있습니다. 🎜🎜이는 v-bind 구문이 JS 값으로 전달하는 모든 것을 허용하기 때문입니다. 따옴표를 추가하면 Vue가 이를 문자열로 처리합니다. 🎜🎜Vue에는 v-bind에 대한 단축 구문도 있습니다. 🎜

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
    :class="class"
  />
</template>

export default {
  computed: {
    class() {
      return darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;;
    }
  }
};

🎜정말 놀라운 점은 동일한 구성 요소에 정적 클래스와 동적 클래스를 모두 가질 수도 있다는 것입니다. 정적 클래스는 위치 지정 및 레이아웃과 같이 변경되지 않는 항목에 사용되며 동적 클래스는 테마와 같은 항목에 사용됩니다. 🎜rrreee🎜 이 경우 theme는 다음을 포함하는 클래스 이름입니다. 이름에 변수를 적용하겠습니다. 🎜

조건부 클래스 이름

🎜 v-bind는 모든 JS 표현식을 허용하므로 이를 사용하여 정말 멋진 작업을 수행할 수 있습니다. 제가 가장 좋아하는 것은 템플릿에서 삼항 표현식을 사용하는 것입니다. 이는 매우 깨끗하고 읽기 쉬운 경향이 있습니다. 🎜rrreee🎜darkMode가 true이면 dark-theme가 클래스 이름으로 사용됩니다. 그렇지 않으면 light-theme을 선택합니다. 🎜

배열 구문 사용

🎜다양한 클래스를 동적으로 추가해야 하는 경우 배열이나 객체를 사용할 수 있습니다. 두 가지 방법 모두 유용합니다. 먼저 배열 방법을 살펴보겠습니다. 🎜🎜JS 표현식을 평가하는 것이므로 방금 배운 표현식을 배열 구문으로 결합할 수 있습니다🎜rrreee🎜배열을 사용하여 이 요소에 두 개의 동적 클래스 이름을 설정합니다. fontTheme 값은 글꼴 모양을 변경하는 클래스 이름입니다. 이전 예에서는 darkMode 변수를 사용하여 어두운 테마와 밝은 테마 사이를 전환할 수 있습니다. 🎜

객체 구문 사용

🎜객체를 사용하여 동적 클래스 목록을 정의할 수도 있으므로 더 많은 유연성이 제공됩니다. 🎜🎜값이 true인 키/값 쌍의 경우 키를 클래스 이름으로 사용합니다. 개체 구문의 예를 살펴보겠습니다. 🎜rrreee🎜 개체에는 dark-theme 및 light-theme라는 두 개의 키가 포함되어 있습니다. 이전에 구현한 논리와 유사하게 darkMode 값에 따라 이러한 테마 간에 전환하려고 합니다. 🎜🎜 darkMode가 true이면 dark-theme가 요소에 동적 클래스 이름으로 적용됩니다. 하지만 !darkMode 값이 false이므로 light-them은 적용되지 않습니다. 🎜🎜이제 Vue 구성 요소에 클래스를 동적으로 추가하는 기본 사항을 다루었습니다. 그렇다면 내 사용자 정의 구성 요소를 사용하여 이 작업을 어떻게 수행할 수 있습니까? 🎜

맞춤 구성요소와 작동

🎜앱에 맞춤 구성요소가 있다고 가정해 보세요🎜rrreee🎜테마 관리를 변경하는 클래스를 동적으로 추가하려면 어떻게 해야 하나요? 실제로는 매우 간단합니다. 🎜🎜전과 같이 :class 속성만 추가하면 됩니다. 🎜rrreee🎜이것은 Vue가 MovieList의 루트 요소에 직접 클래스를 설정하기 때문에 작동합니다. 🎜🎜구성 요소에 props를 설정할 때 Vue는 이러한 props를 props 섹션의 구성 요소가 지정한 props와 비교합니다. 일치하는 항목이 있으면 일반 소품으로 전달됩니다. 그렇지 않으면 Vue는 이를 루트 DOM 요소에 추가합니다. 🎜🎜여기서 MovieList는 class 속성을 ​​지정하지 않기 때문에 Vue는 해당 속성이 루트 요소에 설정되어야 한다는 것을 알고 있습니다. 🎜🎜그러나 동적 클래스 이름을 사용하면 좀 더 고급 작업을 수행할 수 있습니다. 🎜

빠른 클래스 이름 생성

🎜클래스 이름을 동적으로 추가하거나 제거하는 다양한 방법을 다루었습니다. 하지만 동적으로 생성된 클래스 이름 자체는 어떻습니까? 🎜🎜모든 다양한 유형의 버튼에 대해 20가지 CSS 스타일을 제공하는 Button 구성 요소가 있다고 가정해 보겠습니다. 🎜

你可能不想花一整天的时间把每一项都写出来，也不想把开关的逻辑都写出来。相反，我们将动态生成要应用的类的名称。

<template>
  <span
    class="description"
    :class="theme"
  >
    This is how you add static classes in Vue.
  </span>
</template>


export default {
  data() {
    return {
      theme: &#39;blue-theme&#39;,
    };
  }
};

.blue-theme {
  color: navy;
  background: white;
}

我们可以设置一个变量来包含我们想要的任何类名的字符串。如果我们想对Button组件执行此操作，则可以执行以下简单操作：

<template>
  <button
    @click="$emit(&#39;click&#39;)"
    class="button"
    :class="theme"
  >
    {{ text }}
  </button>
</template>

export default {
  props: {
    theme: {
      type: String,
      default: &#39;default&#39;,
    }
  }
};

.default {}

.primary {}

.danger {}

现在，使用Button组件的任何人都可以将theme属性设置为他们想要使用的任何主题。

如果没有设置任何类，它将添加.default类。如果将其设置为primary，则会添加.primary类。

使用计算属性来简化类

最终，模板中的表达式将变得过于复杂，并将开始变得非常混乱和难以理解。幸运的是，我们有一个简单的解决方案，就是使用计算民属性：

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
    :class="class"
  />
</template>

export default {
  computed: {
    class() {
      return darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;;
    }
  }
};

这不仅易于阅读，而且还可以轻松添加新功能并在将来进行重构。

英文原文地址：https://forum.vuejs.org/t/add-a-dynamically-generated-class-name-to-components-class-attribute-from-mixin/27626

为了保证的可读性，本文采用意译而非直译。

相关推荐：


2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

위 내용은 Vue에서 클래스 이름을 동적으로 추가하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!