Vue 스타일 전환 및 Vue 동적 스타일 사용에 대한 튜토리얼

이 글에서는 vue의 스타일 전환과 1단계 vue의 동적 스타일 사용에 대한 튜토리얼을 소개합니다. 도움이 필요한 친구들이 여기서 배울 수 있는 몇 가지 사례가 있습니다.

저희는 vue를 선택했기 때문에 물건을 만들 때 돔을 운영할 생각은 하지 마시고 모든 것을 vue에 맡겨주세요.

다음은 매우 간단하지만 일반적으로 사용되는 효과입니다. 아마도 모든 사람이 이 요구 사항을 사용할 것입니다.

jquery와 같은 것을 사용하여 작성하면 많이 작성해야 할 수 있습니다.

코드는 다음과 같습니다

html

첨부된 것은 vue

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

css                                            개의 코드 간단한 논리적 처리로 이전의 다양한 DOM 작업에 비해 많은 것을 절약할 수 있습니다.

ps: Vue 동적 스타일 솔루션

*{
        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;
        }
      }
    });

이에 대해서는 말할 것도 없지만 클래스 이름에 '-' 기호가 있으면 오류가 보고됩니다.

또 다른

:class="{active: isActive}"

believe가 있습니다. 이 사례를 읽은 후에는 방법을 익혔으며 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주의 깊게 살펴보시기 바랍니다.

관련 읽기:

PHP에서 가장 간단한 문자열 매칭 알고리즘, PHP 매칭 알고리즘_PHP 튜토리얼

PHP에서 가장 간단한 문자열 매칭 알고리즘 튜토리얼

PHP에서 스택 데이터 구조를 구현하는 방법 및 브래킷의 자세한 코드 예 매칭 알고리즘

위 내용은 Vue 스타일 전환 및 Vue 동적 스타일 사용에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!