时间戳

首页 > 解决方案 > Vue.js 绑定列表中每个项目的样式（类）与 v-for 依赖于项目数据

vue.js - Vue.js 绑定列表中每个项目的样式（类）与 v-for 依赖于项目数据

问题描述

我有一个 vue 对象，其中包含一组项目作为数据（在我的情况下是飞行计划）。到目前为止，该列表已正确呈现。

现在问题来了。我想在迭代v-for列表中的每个项目（飞行计划）时应用不同的样式，具体取决于当前迭代的飞行计划成员的值fplType。目前所有列表项（飞行计划）都获得类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>

标签： vue.jsvuejs2v-for

解决方案

您的语法几乎是正确的，但由于您的类名包含“-”字符，您只需在里面引用它们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>

推荐阅读