我有一个带有一系列项目作为数据的vue对象(在我的情况下是飞行计划(。到目前为止,该列表的渲染正确。
现在出现了问题。我想在列表中使用v-for
迭代时将不同的样式应用于列表中的每个项目(Flightplan(,取决于当前迭代的Flighplan Memeber fplType
的值。当前所有列表项目(Flightplans(获取flightplan-list-ifr-dep
类。
,但我需要(伪代码(之类的东西:
<li v-for="flightplan in flightplans"
v-bind:id="flightplan.id"
v-bind:class="{
flightplan-list-ifr-dep: flightplan.fplType === 'departure',
flightplan-list-ifr-arr: flightplan.fplType === 'arrival'
}"
>
因此,每个项目都从当前迭代飞行计划的fpltype中获取自己的分类。
<div id="flightplan-list-area" class="flightplan-list-area-style">
<ul>
<li v-for="flightplan in flightplans"
v-bind:id="flightplan.id"
@click="selected(flightplan, $event)">
<div class="flightplan-list-ifr-dep">
<p class="flightplan-list-ifr-dep-callsign">{{ flightplan.callsign }}</p>
<p class="flightplan-list-ifr-dep-aircraft-type">{{ flightplan.aircraft_type }}</p>
<p class="flightplan-list-ifr-dep-aircraft-wtc">{{ flightplan.aircraft_wtc }}</p>
</div>
</li>
</ul>
</div>
<script lang="javascript">
var vue_FLIGHTPLAN_MODEL = new Vue({
el: "#flightplan-list-area",
data: {
flightplans: [],
selected_flightplan_element: null,
},
});
</script>
您的语法几乎是正确的,但是由于您的类名称包含" - "字符,因此您只需要在v-bind:class
中引用它们:
...
v-bind:class="{
'flightplan-list-ifr-dep': flightplan.fplType === 'departure',
'flightplan-list-ifr-arr': flightplan.fplType === 'arrival'
}"
...
实时演示
var vue_FLIGHTPLAN_MODEL = new Vue({
el: "#flightplan-list-area",
data: {
flightplans: [
{ id: 1, callsign: 'ABC', aircraft_type: 'Boeing 737', aircraft_wtc: 'xyz', fplType: 'departure' },
{ id: 2, callsign: 'DEF', aircraft_type: 'Boeing 737', aircraft_wtc: 'uvw', fplType: 'arrival' },
{ id: 3, callsign: 'HIJ', aircraft_type: 'Boeing 737', aircraft_wtc: 'abc', fplType: 'departure' },
],
selected_flightplan_element: null,
},
methods: {
selected (plan, e) {
this.selected_flightplan_element = plan;
}
},
});
li.flightplan-list-ifr-dep {
color: blue;
}
li.flightplan-list-ifr-arr {
color: green;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="flightplan-list-area" class="flightplan-list-area-style">
<ul>
<li v-for="flightplan in flightplans"
v-bind:id="flightplan.id"
v-bind:class="{
'flightplan-list-ifr-dep': flightplan.fplType === 'departure',
'flightplan-list-ifr-arr': flightplan.fplType === 'arrival'
}"
@click="selected(flightplan, $event)">
<div class="flightplan-list-ifr-dep">
<p class="flightplan-list-ifr-dep-callsign">{{ flightplan.callsign }}</p>
<p class="flightplan-list-ifr-dep-aircraft-type">{{ flightplan.aircraft_type }}</p>
<p class="flightplan-list-ifr-dep-aircraft-wtc">{{ flightplan.aircraft_wtc }}</p>
</div>
</li>
</ul>
</div>
您可以使用对象样式语法这样的语法:
<li v-for="flightplan in flightplans">
<div :class="{
'fpl-foo': flightplan.fplType === 1,
'fpl-bar': flightplan.fplType === 2,
'fpl-baz': flightplan.fplType === 3
}">
<!-- ... -->
</div>
</li>
...或使用方法:
<li v-for="flightplan in flightplans">
<div :class="getClass(flightplan.fplType)">
<!-- ... -->
</div>
</li>
methods: {
getClass (fplType) {
// Determine the class and return it,
// this can also be an array in case
// of more than one class
}
}
您的伪代码是正确的。您可以动态绑定一类。请参阅类和样式绑定
因此,以下代码将为您工作:
<li v-for="flightplan in flightplans"
:key="flightplan.id"
v-bind:id="flightplan.id"
v-bind:class="{
'flightplan-list-ifr-dep': flightplan.fplType === 'departure',
'flightplan-list-ifr-arr': flightplan.fplType === 'arrival'
}"
>
使用v-for时,建议始终使用唯一的键。
我为您做了一个简单的示例。