Vue에서 스타일을 전환하는 방법

이 글은 주로 Vue에서 스타일을 전환하는 방법과 Vue에서 동적 스타일을 구현하는 방법을 소개합니다. 이 글은 매우 자세하게 소개되어 있어 참고할 만한 가치가 있습니다. 우리는 vue를 선택했고, 물건을 만들 때 돔을 운영할 생각은 하지 말고, 모든 것을 vue에 맡겨두세요.

다음은 매우 간단하지만 매우 일반적인 효과입니다. 아마도 모든 사람들이 그러한 필요를 사용하게 될 것입니다.아래 그림을 참조하십시오

jquery와 같은 것을 쓰기에 사용하면 탐색 모음의 스타일 전환 기능, 코드를 많이 작성해야 할 수도 있으니 vue를 사용합니다,

코드는 다음과 같습니다

html

첨부된 파일은 vue

<p id="wrap" class="box">
  <p v-for="(list,index) in navLists" class="nav" :class="{ red:changeRed == index}" @click="reds(index)">{{list.text}}</p>
</p>

css

에 있는 스타일 및 클래스 바인딩 API입니다.​​​​

 *{
        padding: 0;margin: 0;
      }
      .box{
        height: 40px;
        background: cyan;
      }
      .nav{
        line-height: 40px;
        display: inline-block;
        margin-left: 100px;
        cursor: pointer;
      }
      .red{
        color: red;
      }

//前提是必须引入vuejs哦！
var vm = new Vue({
      el:"#wrap",
      data:{
        navLists:[
          {
            "text":"首页"           
          },
          {
            "text":"组件"           
          },
          {
            "text":"API"            
          },
          {
            "text":"我们"           
          }
        ],
        changeRed:0
      },
      methods:{
        reds:function(index){
          this.changeRed = index;
        }
      }
    });

자세히 살펴보세요. js 코드를 살펴보면 시뮬레이션된 데이터 외에도 실제로 간단한 논리적 처리만 있어서 이전의 다양한 DOM 작업에 비해 많은 것을 절약할 수 있습니다.

ps: vue 동적 스타일 솔루션

:class="{active: isActive}"

이에 대해 말씀드릴 부분은 없지만 클래스 이름에 '-' 기호가 있으면 오류가 보고됩니다.

또 있습니다

class="[lineStyle(courseClick)]"
    lineStyle(isClick){
        if (isClick===true){
          return 'tab-items-current'
        }else {
          return 'class-tab-items'
        }
      }

위 내용은 다음과 같습니다. 제가 정리한 내용이 모두를 위해, 앞으로도 모든 분들께 도움이 되기를 바랍니다. 관련 기사:

JavaScript에서 자동 숫자 증가를 구현하는 방법

React 프로젝트에서 Redux를 사용하는 방법(자세한 튜토리얼)

JS에서 ionic3에서 무작위 레이아웃 폭포 흐름을 구현하는 방법

원점 복귀 효과를 얻는 방법

위 내용은 Vue에서 스타일을 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!