이 글은 주로 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>
에 있는 스타일 및 클래스 바인딩 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'
}
}
위 내용은 다음과 같습니다. 제가 정리한 내용이 모두를 위해, 앞으로도 모든 분들께 도움이 되기를 바랍니다. 관련 기사:
JS에서 ionic3에서 무작위 레이아웃 폭포 흐름을 구현하는 방법
위 내용은 Vue에서 스타일을 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!