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 ：

<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>