어떻게 한 번만 활성 클래스를 반복 할 수 있습니까?

Question

내 v-for는 제대로 작동하지만, 내 bootstrap을 원한다. 4 css .active class also repeat.i 4 활성 클래스를 한 번만 부트 스트랩하고 싶다. 제발 어떻게 내가 이것을 없앨 수 있는지 제안 해주세요.

var app = new Vue ({ 
 
\t \t el: '#app', 
 
\t \t data:{ 
 
\t \t \t subjects: ['CSE','EEE','BBA'] 
 
\t \t } 
 
\t })

body{ 
 
\t \t font-family: 'Trykker','Spectral SC', serif; 
 
\t } 
 
\t h1,h2,h3,h4,h5,h6{ 
 
\t \t font-family: 'Spectral SC', serif; 
 
\t } 
 
\t p{ 
 
\t \t font-family: 'Trykker', serif; 
 
\t }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div id="app"> 
 

 
\t \t \t 
 
\t \t \t <ul class="list-group"> 
 
\t \t \t  <li v-for="subject in subjects" class="list-group-item active">{{ subject }}</li> 
 
\t \t \t </ul> 
 

 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 

 

 
\t

Answer 1

만 활성화 선택한 주제에 대해 묻는? vuejs 공식 웹 사이트에서 class and style binding을 확인할 수 있습니다. 예제를 포함 시켰습니다.

var app = new Vue ({ 
 
\t \t el: '#app', 
 
\t \t data:{ 
 
\t \t \t activeSubject: 'CSE', 
 
\t \t \t subjects: ['CSE','EEE','BBA'] 
 
\t \t } 
 
\t })

body{ 
 
\t \t font-family: 'Trykker','Spectral SC', serif; 
 
\t } 
 
\t h1,h2,h3,h4,h5,h6{ 
 
\t \t font-family: 'Spectral SC', serif; 
 
\t } 
 
\t p{ 
 
\t \t font-family: 'Trykker', serif; 
 
\t }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div id="app"> 
 

 
\t \t \t 
 
\t \t \t <ul class="list-group"> 
 
\t \t \t  <li v-for="subject in subjects" class="list-group-item" :class="{active:subject==activeSubject}">{{ subject }}</li> 
 
\t \t \t </ul> 
 

 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 

 

 
\t