집 >웹 프론트엔드 >JS 튜토리얼 >Vue에서 조건부로 CSS 클래스 인스턴스를 사용하는 방법에 대한 자세한 설명

Vue에서 조건부로 CSS 클래스 인스턴스를 사용하는 방법에 대한 자세한 설명

小云云원래의: 2018-01-30 17:45:391564검색

웹이 실행되는 동안 요소의 CSS 클래스 이름을 변경해야 하는 경우가 많습니다. 그러나 클래스 이름을 변경할 때 조건부로 스타일을 적용하는 것이 가장 좋은 경우도 있습니다. 예를 들어 페이지 넘김 효과가 있습니다. 페이지 넘기기 효과에는 일반적으로 강조 효과가 있는데, 이는 현재 페이지를 사용자에게 표시하는 데 사용되며 이는 사용자에게 매우 유용합니다. 항목의 스타일은 현재 보고 있는 페이지에 따라 조건부로 설정됩니다.

이 글은 주로 Vue에서 CSS 클래스의 조건부 사용을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

일반적인 페이지 넘김 효과는 다음과 같습니다.

이 예에는 5개의 페이지가 있으며 그 중 하나만 한 번에 선택됩니다. Bootstrap을 사용하여 페이지네이터를 구축하면 선택한 페이지에는 목록 항목에 active라는 CSS 클래스가 적용됩니다. 페이지가 현재 표시된 페이지인 경우 이 클래스가 적용되기를 원합니다. 즉, 활성 클래스 이름을 조건부로 적용하려고 합니다. Vue에서는 요소에 CSS 클래스를 조건부로 적용하는 메서드가 제공됩니다. 이 기술은 다음 콘텐츠에서 시연됩니다.

런타임에 CSS 클래스를 조건부로 적용하려면 JavaScript 객체에 바인딩해야 합니다. 이 작업을 성공적으로 완료하려면 두 단계를 완료해야 합니다. 먼저 CSS 클래스 이름이 정의되었는지 확인한 다음 템플릿에 클래스 바인딩을 만들어야 합니다. 이 문서의 다른 부분에서 이러한 단계를 자세히 설명하겠습니다.

1단계: CSS 클래스 이름 정의

일정 기간 동안 위 이미지에 표시된 5개 페이지 권장 사항이 다음과 같은 HTML 코드를 사용하여 구축되었다고 상상해 보세요.

<p id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a></li>
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a></li>
      <li class="page-item active"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a></li>
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a></li>
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a></li>
    </ul>
  </nav>
</p>

참고: 이 각 목록은 코드 조각의 li 항목은 각 페이지를 나타냅니다. 변경된 요소는 페이지 항목 클래스 이름을 참조합니다. 이 코드에서는 Bootstrap CSS 프레임워크가 사용됩니다. 그러나 정의되지 않은 경우 어딘가에 정의되어 있는지 확인하십시오. 그러나 두 번째 CSS 클래스가 이 기사와 가장 관련이 있습니다.

active라는 CSS 클래스 이름은 현재 선택된 페이지를 식별하는 데 사용됩니다. 이 기사에서 이 CSS 클래스는 Bootstrap 프레임워크에서도 일반적으로 사용됩니다. 위의 코드 조각에서 볼 수 있듯이 활성 클래스는 세 번째 목록 항목 요소에서만 사용됩니다. 짐작할 수 있듯이 이는 조건부로 적용하려는 CSS 클래스입니다. 이렇게 하려면 JavaScript 개체를 추가해야 합니다.

2단계: CSS 클래스 이름 바인딩

1단계의 코드를 재구성해 보겠습니다. 템플릿에서 클래스 바인딩을 생성할 때 객체 구문을 사용하거나 배열 구문을 사용하는 두 가지 주요 옵션이 있습니다. 다음으로 두 가지 방법을 모두 사용하는 방법을 보여 드리겠습니다.

객체 구문 사용

객체 구문을 사용하여 클래스 바인딩을 만들려면 JavaScript 표현식을 사용해야 합니다. 우리가 사용할 표현식은 아래 코드에서 볼 수 있습니다. 해당 코드는 다음과 같습니다.

<p id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" v-bind:class="{&#39;page-item&#39;:true, &#39;active&#39;:(page === currentPage)}">
      <a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ page }}</a>
    </li>
    </ul>
  </nav>
</p>

여기에서는 코드 양을 줄이기 위해 Vue의 v-for 명령어를 사용합니다. 이 지시문은 루프에서 항목을 렌더링하는 데 사용됩니다. 이 예의 항목은 페이지 자체입니다. v-for 지시문을 사용하는 것 외에도 v-bind 지시문도 사용됩니다.

v-bind 지시문은 요소의 클래스 속성을 Vue 인스턴스에 바인딩합니다. Vue 인스턴스는 다음과 같이 정의됩니다.

var app = new Vue({
  el: &#39;#myApp&#39;,
  data: {
    totalPages: 5,
    currentPage: 3
  }
});

이 Vue 인스턴스의 데이터 객체에는 currentPage라는 속성이 포함되어 있습니다. 위에 정의된 HTML 템플릿을 다시 방문하면 이 속성이 참조되고 있음을 알 수 있습니다. 실제로 각 클래스 바인딩과 연결된 JavaScript 개체는 다음과 같습니다.

{&#39;page-item&#39;:true, &#39;active&#39;:(page === currentPage)}

이 개체는 page-item 및 active라는 두 가지 속성을 정의합니다. 이것이 1단계에서 논의된 두 CSS 클래스의 이름이라는 점은 주목할 가치가 있습니다. 2단계에서 이 두 클래스 참조는 JavaScript 개체의 속성 이름이 되었습니다. 이러한 속성 이름과 관련된 값은 JavaScript 표현식입니다. 표현식이 true 로 평가되면 CSS 클래스 이름이 포함됩니다. 표현식이 false 로 평가되면 CSS 클래스가 포함되지 않습니다. 이러한 규칙을 적용한 후 각 속성을 살펴보겠습니다.

첫 번째 속성인 page-item은 실제 값을 갖습니다. 이 하드코딩된 값은 항상 페이지 항목 클래스를 포함하려고 하기 때문에 사용됩니다. 두 번째 속성은 JavaScript 표현식을 사용하는 active 입니다. 이 표현식이 true이면 활성 클래스가 적용됩니다. 이는 currentPage 값을 기반으로 활성 클래스를 조건부로 적용하는 데 사용됩니다.

body {
 width: 100vw;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

.pagination {
 justify-content: center;
}

currentPage의 값이 수정될 때마다 해당 목록 항목에 active가 적용됩니다. 예를 들어, 아래 효과는 다음과 같습니다.

활성 클래스를 조건부로 적용하는 또 다른 방법은 활성 클래스를 배열에 바인딩하는 것입니다.

배열 구문 사용

Vue를 사용하면 배열에 바인딩하여 목록에 CSS 클래스 이름을 추가할 수 있습니다. 배열 구문을 사용하려면 1단계의 HTML 구조를 조정해야 합니다. 수정된 코드는 다음과 같습니다.

<p id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" v-bind:class="[pageItemClass, (page === currentPage) ? activeClass : &#39;&#39;]"> 
      <a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ page }}</a>
      </li>
    </ul>
  </nav>
</p>

和上一个示例的区别就是类绑定上使用数组。这种替代方法需要在 data 对象中添加两个额外的属性。这两个属笥是 pageItemClass 和 activeClass 。更新Vue初始化的代码：

var app = new Vue({
  el: &#39;#myApp&#39;,
  data: {
    totalPages: 5,
    currentPage: 3,
    pageItemClass: &#39;page-item&#39;,
    activeClass: &#39;active&#39;
  }
});

正如你看到了， data 对象变了，虽然 data 对象大小变大了，但是使用数组语法时，模板中的代码稍微干净一些。对象语法更紧凑一些。

对象语法和数组语法之间的选择归结为个人爱好。

这两种方法都可能使你的HTML模板更加复杂。然而，实际上还有更多的事情发生。在实现中，我们正在关注如何分离。我们正在创建一个由数据驱动的模板。这使用的视图更容易测试，并且在应用程序变大时更容易维护。

总结

本文根据 @Chad Campbell 的《 Conditionally Applying a CSS Class in Vue.js 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处: https://www.sitepoint.com/conditionally-applying-css-class-vue-js/ 。

Vue에서 조건부로 CSS 클래스 인스턴스를 사용하는 방법에 대한 자세한 설명

관련 기사