데이터 요소의 속성을 DOM 요소의 속성에 바인딩합니다.

Question

저는 Vue.js의 초보자입니다. 내 HTML과 JS 파일에 다음 코드 줄이 있습니다

HTML

<div id="app"> 
    <ul> 
    <li v-for="item in items" v-bind:class="{{item.className}}">{{item.text}}</li> 
    </ul> 
</div> 

JS

var app = new Vue({ 
    el: '#app', 
    data: { 
    items: [ 
     { 
     className: 'item-1', 
     text: 'Item 1' 
     }, 
     { 
     className: 'item-2', 
     text: 'Item 2' 
     }, 
     { 
     className: 'item-3', 
     text: 'Item 3' 
     } 
    ] 
    } 
}) 

내가 클래스 속성에 각 className의 가치를 결합되어 발생 할 각 DOM 요소의 나는 누군가가 이것에 관해 나를 시정 할 수 있기를 바란다.

Answer 1

v-bind을 사용하는 경우 Vue already assumes은 어떤 종류의 속성이나 개체를 사용하기 때문에 {{...}} 구문을 사용할 필요가 없습니다.

그래서 예를 출력 단순히이 같은 각 className의 값 :

<li v-for="item in items" v-bind:class="item.className">{{item.text}}</li> 

또는 축약 버전 :

<li v-for="item in items" :class="item.className">{{item.text}}</li> 

또는

클래스는 항상 item-i의 패턴을 따르려고하는 경우 :

<li v-for="item, i in items" :class="`item-` + i">{{item.text}}</li>