时间戳

首页 > 解决方案 > 使用Vue.js在for循环中根据条件显示数据对象

vue.js - 使用Vue.js在for循环中根据条件显示数据对象

问题描述

我有一个对象数组，我想根据某些条件显示数据。如果用户 id 与数据 id 显示名称匹配，则该 id 的年龄。也可以通过循环而不是定义来创建单个 div 并显示多个 div对于 3 个不同的 ID，它 3 次。

              <div class="content" v-for="person in persons>
              <div v-for="user in users"
              :key="user.id">
                  <div v-if="user.seqId == person.id" >
                   {{person.name}}          
                  </div>
                <div v-if="user.seqId == person.id">
                   {{person.name}} 
                  </div>
                </div>
                <div v-if="user.seqId == person.id">
                   {{person.name}}  
                  </div>
                </div>
                </div>

            const persons= [
                {
                   name: 'Adam',
                   age:20,
                   id: 1,
                },
                   {
                   name: 'Paul',
                    age:20,
                    id: 2,
                },
                {
                  name: 'James',
                  age:20,
                  id: 3,
                 },
                 ]
              data() {
                return {
                  persons,
                  };
                  }

标签： vue.js

解决方案

创建一个计算属性以将匹配项合并到一个数组中。

computed: {
    matchingUsers() {
        // find persons that exist in users by
        // matching p.id == u.seqId
        return persons.filter(p=>{
            return users.find(u=>u.seqId===p.id)
        })
    }
}

然后迭代单个数组...

<div class="content" v-for="(person,i) in matchingUsers" :key="i">
    {{person.name}} - {{person.age}}
</div>

Codeply 演示

推荐阅读