이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!