Vue.js 从数组中添加类

Question

我是 Vue 新手，我正在尝试显示卡片列表。卡片将分成三排。那行得通，但是我想根据数组中的类列表为每一行赋予不同的类名，但似乎无法弄清楚如何用我现在拥有的东西来做到这一点。

我尝试在行上使用v-bind:class，但不确定这是否是我想要做的事情。

这是我的 HTML 结构的样子：

<div class="row" v-for="i in row”>
  <div v-for="(show, index) in rowItems(i)" class="card" v-bind:class="{ new: item.new }">
  <img v-bind:src="item.illustration">
    <p>{{ item.name }}</p>
  </div>
</div>

这是我在 Vue 中所拥有的。我的数据在一个对象（itemList）中。

let app = new Vue({
  el: '#container',
  data: {
    rowItems: 3,
    items: itemList,
    rowClasses: ['row1', 'row2', 'row3', 'row4']
  },
  computed:{
    row:function(){     
      return Math.ceil(this.items.length / this.rowItems);
    },
  },
  methods:{
    rowItems:function(index){
     return this.items.slice((index - 1) * this.rowItems, index * this.rowItems)
    }
  }
});

Answer 1

你可以这样v-bind the class using object syntax：

<div :class="{ new: item.new, [rowClasses[index]]: true }">

new Vue({
  el: '#app',
  data() {
    return {
      rowCount: 3,
      items: [
        { name: 'A', new: false },
        { name: 'B', new: false },
        { name: 'C', new: true },
        { name: 'D', new: false },
      ],
      rowClasses: ['row1', 'row2', 'row3', 'row4']
    };
  },
  computed: {
    row() {     
      return Math.ceil(this.items.length / this.rowCount);
    },
  },
  methods: {
    rowItems(index) {
      return this.items.slice((index - 1) * this.rowCount, index * this.rowCount);
    },
  }
})

.card {
  border: solid 1px gray;
  margin: 10px;
  padding: 10px;
}
.new {
  background-color: lightyellow;
}
.row1 {
  color: red;
}
.row2 {
  color: green;
}
.row3 {
  color: blue;
}

<script src="https://unpkg.com/vue@2.5.16"></script>

<div id="app">  
  <div class="row" v-for="i in row">
    <div v-for="(item, index) in rowItems(i)"
         class="card"
         :class="{ new: item.new, [rowClasses[index]]: true }">
      <pre>{ new: {{item.new}}, [{{rowClasses[index]}}]: true }</pre>
      <p>{{ item.name }}</p>
    </div>
  </div>
</div>

或者你可以调用一个返回这样一个对象的方法：

// <template>
<div :class="getRowClass(item, index)">

// <script>
methods: {
  getRowClass(item, index) {
    return {
      new: item.new,
      [this.rowClasses[index]]: true
    };
  }
}

new Vue({
  el: '#app',
  data() {
    return {
      rowCount: 3,
      items: [
        { name: 'A', new: false },
        { name: 'B', new: false },
        { name: 'C', new: true },
        { name: 'D', new: false },
      ],
      rowClasses: ['row1', 'row2', 'row3', 'row4']
    };
  },
  computed: {
    row() {     
      return Math.ceil(this.items.length / this.rowCount);
    },
  },
  methods: {
    rowItems(index) {
      return this.items.slice((index - 1) * this.rowCount, index * this.rowCount);
    },
    getRowClass(item, index) {
      const rowClass = this.rowClasses[index % this.rowClasses.length];
      return {
         new: item.new,
         [rowClass]: true
      };
    }
  }
})

.card {
  border: solid 1px gray;
  margin: 10px;
  padding: 10px;
}
.new {
  background-color: lightyellow;
}
.row1 {
  color: red;
}
.row2 {
  color: green;
}
.row3 {
  color: blue;
}

<script src="https://unpkg.com/vue@2.5.16"></script>

<div id="app">  
  <div class="row" v-for="i in row">
    <div v-for="(item, index) in rowItems(i)"
         class="card"
         :class="getRowClass(item, index)">
      <pre>{{getRowClass(item, index)}}</pre>
      <p>{{ item.name }}</p>
    </div>
  </div>
</div>

或者您可以完全在 CSS 中执行此操作，使用 nth-of-type() 并消除对 rowClasses[] 的需要。

// <style>
.card:nth-of-type(1n) {}   // every 1st card
.card:nth-of-type(2n) {}   // every 2nd card
.card:nth-of-type(3n) {}   // every 3rd card

new Vue({
  el: '#app',
  data() {
    return {
      rowCount: 3,
      items: [
        { name: 'A', new: false },
        { name: 'B', new: false },
        { name: 'C', new: true },
        { name: 'D', new: false },
      ],
    };
  },
  computed: {
    row() {     
      return Math.ceil(this.items.length / this.rowCount);
    }
  },
  methods: {
    rowItems(index) {
      return this.items.slice((index - 1) * this.rowCount, index * this.rowCount);
    }
  }
})

.card {
  border: solid 1px gray;
  margin: 10px;
  padding: 10px;
}
.new {
  background-color: lightyellow;
}
.card:nth-of-type(1n) {
  color: red;
}
.card:nth-of-type(2n) {
  color: green;
}
.card:nth-of-type(3n) {
  color: blue;
}

<script src="https://unpkg.com/vue@2.5.16"></script>

<div id="app">  
  <div class="row" v-for="i in row">
    <div v-for="(item, index) in rowItems(i)"
         class="card"
         :class="{ new: item.new }">
      <pre>.card:nth-of-type({{ index+1 }}n)</pre>
      <p>{{ item.name }}</p>
    </div>
  </div>
</div>