vue.js 연구 노트 바인딩 스타일 스타일 및 클래스 목록

데이터 바인딩의 일반적인 요구 사항은 요소의 클래스 목록과 해당 인라인 스타일을 조작하는 것입니다. 둘 다 속성이므로 v-bind를 사용하여 처리할 수 있습니다. 표현식의 최종 문자열만 평가하면 됩니다. 그러나 문자열 연결은 번거롭고 오류가 발생하기 쉽습니다. 따라서 Vue.js는 클래스 및 스타일과 함께 사용될 때 v-bind를 특별히 향상시킵니다. 문자열 외에도 표현식의 결과 유형은 객체 또는 배열일 수도 있습니다.

1. Class 속성을 바인딩합니다.

v-bind: 명령을 사용하여 데이터를 바인딩합니다.

구문: e46ddcb875112b0f8e33ef725095c7c416b28748ea4df4d9c2150843fecfba68 . 클래스 뒤의 큰따옴표는 객체 리터럴/객체 참조/배열을 매개 변수로 허용합니다.

여기서 {active: isActive}는 객체 매개 변수이고 active는 클래스 이름, isActive는 부울 값입니다. 예는 다음과 같습니다.

객체 리터럴 바인딩

html:

<div id="classBind">
<span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">
状态:{{alert}}{{isSafe}}
</span>
</div>
//js
var app11=new Vue({
el:&#39;#classBind&#39;,
data:{
isWarning:true,
alertList:[&#39;红色警报&#39;,&#39;警报解除&#39;],
alert:&#39;&#39;
},
computed:{
isSafe:function(){
return !this.isWarning;
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
}
});

css:

.warning{
color:#f24;
}
.safe{
color:#42b983;
}

클릭할 때 상태 쓸 때 텍스트, 다음 텍스트 및 색상을 전환할 수 있습니다

//상태: 경고가 true

//상태: 빨간색 경고 false

바운드 개체 참조

여기에 바인딩된 개체는 Vue 인스턴스의 데이터에 기록될 수 있으며 class="classObj"에서 큰따옴표로 묶인 클래스는 Vue 인스턴스의 classObj 개체에 대한 참조입니다. classObj는 데이터에 배치되거나 계산될 수 있습니다. classObj에 해당하는 함수는 다음과 같이 객체를 반환해야 합니다.

js:

var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['红色警报','警报解除'],
alert:''
},
computed: {
isSafe: function () {
return !this.isWarning;
},
classObj:function(){
return {
warning: this.isWarning,
safe:this.isSafe
}
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
}
});

바인딩 배열

html:

<div v-bind:class="classArray" @click="removeClass()">去掉class</div>

js

data: {
classArray:["big",'red']
}
methods:{
removeClass:function(){
　　this.classArray.pop();
}
}

css:

.big{
font-size:2rem;
}
.red{
color:red;
}

효과를 클릭하면 클래스가 제거됩니다. RemoveClass 함수가 호출되어 classArray 배열의 마지막 항목이 제거됩니다. 처음으로 'red'를 제거하면 글꼴 색상이 빨간색에서 검은색으로 변경됩니다. 'big'으로 설정하면 글꼴이 작아집니다.

2. 인라인 스타일 바인딩

지금 이 페이지 옆에 있는 Vue api 문서를 보고 여기서 판매하고 있는데 ㅇ( ^▽^ )o

html

<div id="styleBind">
<span :style="{color:theColor,fontSize:theSize+&#39;px&#39;}" @click="bigger">styleBind</span>
</div>

css

CSS가 필요하지 않습니다. . .

js

var app12=new Vue({
el:'#styleBind',
data:{
theColor:'red',
theSize:14
},
methods:{
bigger:function(){
this.theSize+=2;
}
}
});

객체 리터럴을 전달하는 것 외에도 객체 참조 및 배열을 V-bind:style

위 내용은 에디터가 소개한 vue.js 스터디노트의 바인딩 스타일과 클래스입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

더 많은 vue.js 학습 노트, 바인딩 스타일 스타일 및 클래스 목록 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!