Question

looping如何使用模数each two data？如果我想为every two data进行循环，请获取顺序类。示例：

我有6个数据：

数据A
数据B
数据C
数据D
数据E
数据F

因此，我想要做的最终结果是将类赋予模数every two data的每个数据。我会得到结果：

数据A | 1级
数据B | 1级
数据C | 2级
数据D | 2级
数据E | 3级
数据F | 3级

如果输入任何新数据，class name将始终使用increased counter。

我在下面创建了示例代码：

var app = new Vue({
    el: '#app',
    data() {
        return {
            items: [{
                "id": "111",
                "nama": "George",
            }, {
                "id": "222",
                "nama": "Paul",
            }, {
                "id": "333",
                "nama": "Mira",
            }, {
                "id": "444",
                "nama": "Doms",
            }, {
                "id": "555",
                "nama": "Brian",
            }, {
                "id": "666",
                "nama": "Oscar",
            }]
        }
    },
    methods: {
        computedClass(index) {
            defValue = 1
            if (index % 2 === 0) {
                return "data_1"
            }
        }
    }
});

.item {
  padding: 10px;
}
.data_1 {
  color: #FF0000;
}
.data_2 {
  color: #0000FF;
}
.data_3 {
  color: #00CC00;
}

<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>

<div id="app">
  <div class="item"
      :class="computedClass(index)"
       v-for="(item, index) in items">
       {{item.nama}}
       </div>
</div>

但是我很难做counter and modulus因此我获得该类名称的每两个数据也是incremented with counter。

在上面的代码中，我只能做every second data的模数。不是every two data。我很困惑用计数器命名

你能帮我吗？感谢

Answer 1

你有正确的想法，但你的逻辑在computedClass方法中是错误的。

请改为尝试：

computedClass(index) {
  return "data_" + Math.ceil((index + 1) / 2);
}

这是一个有效的例子：

＆＃13;

var app = new Vue({
  el: '#app',
  data() {
    return {
      items: [{"id": "111","nama": "George",},{"id": "222","nama": "Paul",},{"id": "333","nama": "Mira",},{"id": "444","nama": "Doms",},{"id": "555","nama": "Brian",},{"id": "666","nama": "Oscar",}]
    }
  },
  methods: {
    computedClass(index) {
      return "data_" + Math.ceil((index + 1) / 2);
    }
  }
});

＆＃13;

.item {
  padding: 10px;
}
.data_1 {
  color: #FF0000;
}
.data_2 {
  color: #0000FF;
}
.data_3 {
  color: #00CC00;
}

＆＃13;

<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>

<div id="app">
  <div 
    class="item"
    :class="computedClass(index)"
    v-for="(item, index) in items"
  >
    {{item.nama}}
  </div>
</div>

＆＃13;

Vue循环与模数

1 个答案: