masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
javascript - Bagaimanakah gelung v-untuk gelung vue melalui 2 item pada satu masa?
给我你的怀抱
给我你的怀抱 2017-05-16 13:20:30
0
8
838

Beginilah saya melaksanakannya sekarang, tetapi saya selalu rasa seperti ada sesuatu yang tidak kena

<ul v-for="(item,index) in items" v-if="index%2==0">
  <li>{{items[index].name}}</li>
  <li>{{items[index+1].name}}</li>
</ul>
给我你的怀抱
给我你的怀抱

membalas semua(8)
为情所困
为情所困2017-05-16 13:22:30 Tingkat 8 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p id="app">
        <input type="number" v-model.number="count" />
        <ol>
            <li v-for="g in groups">
                <ol>
                    <li v-for="item in g">{{ item }}</li>
                </ol>
            </li>
        </ol>
    </p>

    <script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>

    <script>

        function GroupByCount(items, count) {
            var len = items.length;

            var arr = [];
            var child = [];

            for (var i = 0; i < len; i++) {
                child.push(items[i]);

                if (child.length === count) {
                    arr.push(child);
                    child = [];
                }
            }

            if (child.length > 0) {
                arr.push(child);
            }

            return arr;
        }

        new Vue({
            el: '#app',
            data() {
                return {
                    count: 2,
                    items: []
                }
            },
            created() {
                this.items = Array.apply(null, Array(20)).map(function (x, i) { return i; })
            },
            computed: {
                groups() {
                    return GroupByCount(this.items, this.count)
                }
            }
        })
    </script>
</body>
</html>
Suka +0
Tambah Balasan
过去多啦不再A梦
过去多啦不再A梦2017-05-16 13:22:30 Tingkat 7 
<ul v-for="(item,index) in items">    
    <slot v-if="index<items.length&&index%2==0">
      <li >{{items[index].name}}</li>
      <li v-if="index<items.length-1">{{items[index+1].name}}</li>
    </slot>
</ul>
Suka +0
Tambah Balasan
滿天的星座
滿天的星座2017-05-16 13:22:30 Tingkat 6 
<ul v-for="i in (items.length / 2)">
  <li>{{items[(i - 1) * 2].name}}</li>
  <li>{{items[(i - 1) * 2 + 1].name}}</li>
</ul>

Mungkin itu maksudnya, tetapi terdapat beberapa butiran yang perlu anda fikirkan lebih lanjut, seperti perkara yang perlu dilakukan apabila items.lengthadalah nombor ganjil

Suka +0
Tambah Balasan
某草草
某草草2017-05-16 13:22:30 Tingkat 5

index是从0开始的

Suka +0
Tambah Balasan
大家讲道理
大家讲道理2017-05-16 13:22:30 Tingkat 4

Kenapa saya rasa tiada perbezaan antara apa yang anda tulis seperti ini dan keseluruhan gelung? . .

Suka +0
Tambah Balasan
Ty80
Ty802017-05-16 13:22:30 Tingkat 3

Apakah keperluan khusus anda Anda tidak boleh memberitahu apa-apa dengan melihat kod anda

Adakah perkara berikut yang anda mahukan?
Ini ialah atribut yang dikira, bahagikan tatasusunan kepada dua tatasusunan dan letakkannya dalam satu tatasusunan

itemsComputed (){
    let arr = [];
    arr.push(this.items.filter((o,i)=>i%2===0));
    arr.push(this.items.filter((o,i)=>i%2===1));
    return arr;
}
    <ul>
        <li v-for="item in itemsComputed[0]">
            ...
        </li>
    </ul>
    <ul>
        <li v-for="item in itemsComputed[1]">
            ...
        </li>
    </ul>
Suka +0
Tambah Balasan
小葫芦
小葫芦2017-05-16 13:22:30 Tingkat 2

Jika anda boleh menggunakan sintaks templat secara langsung, anda tidak perlu melakukan pengiraan tambahan: 

<template v-for="(item,index) in items">
    <ul v-if="index % 2 == 0">
        <li>{{items[index].name}}</li>
        <li v-if="index < items.length">{{items[index+1].name}}</li>
    </ul>
</template>
Suka +0
Tambah Balasan
洪涛
洪涛2017-05-16 13:22:30 Tingkat 1

Eh? Adakah ini untuk paparan kumpulan? 

<template>
    <ul v-for="(item,idx) in b">
      <li v-for="i in item">{{i}}</li>
    </ul>
</template>

<script>
export default {
  data () {
    return {
      a: [1, 2, 3, 4, 5]
    }
  },
  computed: {
    b () {
      const b = []
      const a = this.a
      for (let i = 0, l = a.length; i < l;) {
        b.push([a[i++], a[i++]])
      }
      return b
    }
  }
}
</script>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan