Question

我的v-for工作正常但事情是我想要我的bootstrap 4 css .active class也重复。我想引导4个活动类重复一次。请建议我如何摆脱这个。

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

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

 <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>

	<div class="container">
		<div class="row">
			<div id="app">

			
			<ul class="list-group">
			    <li v-for="subject in subjects" class="list-group-item active">{{ subject }}</li>
			</ul>

			</div>
		</div> 
	</div>

Answer 1

您是否要求仅激活所选主题？您可以在vuejs官方网站上查看class and style binding。我已经包含了这个例子。

＆＃13;

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

＆＃13;

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

＆＃13;

 <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>

	<div class="container">
		<div class="row">
			<div id="app">

			
			<ul class="list-group">
			    <li v-for="subject in subjects" class="list-group-item" :class="{active:subject==activeSubject}">{{ subject }}</li>
			</ul>

			</div>
		</div> 
	</div>

＆＃13;

我怎么能只重复一次活跃课程？

1 个答案: