Question

我的JSON看起来像这样：

users: [
        { 'name': 'User 1'},
        { 'name': 'User 2'},
        { 'name': 'User 3'},
        { 'name': 'User 4'},
        { 'name': 'User 5'},
        { 'name': 'User 6'},
    ]

现在我正在循环播放，并且在同一div中显示，但是我需要通过以下条件来显示数据：

在一个div中最多显示长度3，在其他div中显示剩余的内容（在该div的右边另加一个div）。此处的JSON将是动态的，长度可以为 <3 或> 3。我的要求如下：

JSFiddle link

Answer 1

Vue可方便地完成此类任务。您需要基于用户的另外两个计算属性。模板：

<div>{{left}}</div>
<div>{{right}}</div>

computed: {
    left: function(){
        return this.users.slice(0, 3);
    },
    reight: function() {
        return this.users.slice(3);
    }
}

Answer 2

创建一个计算属性，将您的数组分为两个，第一个具有三个元素，第二个具有其余元素。

然后在splitUsers数组上循环显示。

new Vue({
  el: '#app',
  data: {
    users: [{"name":"User 1"},{"name":"User 2"},{"name":"User 3"},{"name":"User 4"},{"name":"User 5"},{"name":"User 6"}]
  },
  computed: {
    splitUsers () {
      const split = [ this.users.slice(0, 3) ]
      if (this.users.length > 3) {
        split.push(this.users.slice(3))
      }
      return split
    }
  }
})

#app { display: flex; }
#app div { padding: 1rem; border: 1px solid black; }

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <div v-for="chunk in splitUsers">
    <p v-for="user in chunk">{{ user.name }}</p>
  </div>
</div>

Answer 3

另一个选项：https://jsfiddle.net/kth61cLu/1/

<div id="app">
    <h3>Users</h3>
    <div class="users1">
        <div v-for="(user, index) in users" v-if="index < 3">
             <p>{{user.name}}</p>
        </div>
    </div>
    <div v-if="users.length > 3" class="users2">
        <div v-for="(user, index) in users" v-if="index > 3">
             <p>{{user.name}}</p>
        </div>
    </div>
</div>

Answer 4

好的，这是您可以尝试的。

<h3>Users</h3>
<div  v-for="(user) in users.slice(0,3)">
   <p>{{user.name}}</p>
</div>
<div  v-for="(user) in users.slice(3)">
    <p>{{user.name}}</p>
</div>

希望有帮助！

Answer 5

我不知道这是否是一个好答案。我所做的就是更改了一些json，css和for循环，以便于加载。并在div中添加了一个“ divs”类

//this would be the html inside id APP
<div v-for="(item,key) of users" :key="key" class="divs">
      <p v-for="data in item">
        {{ data.name }}
      </p>
</div>

，然后将json格式更改为类似的格式。如果我们在html中循环，则会创建一个新的div。

users: [
        [
        { 'name': 'User 1'},
        { 'name': 'User 2'},
        { 'name': 'User 3'}
      ],
      [
        { 'name': 'User 4'},
        { 'name': 'User 5'},
        { 'name': 'User 6'}
      ]
    ],

，然后使用户显示为您的要求。我们必须添加css才能在嵌入式块中显示div。像这样的CSS波纹管。

.divs{
    width: 100px;
    display: inline-block;
}

这将是一个漫长的过程，但我认为。可以。

在2个不同的div中显示动态JSON数据

5 个答案: