时间戳

首页 > 解决方案 > 模板中的VueJS条件类

vue.js - 模板中的VueJS条件类

问题描述

我有这个模板可以呈现每个项目的卡片。这些项目正在从 Firebase 中提取并存储在一个数组中

<template>
    <div class="projects-wrapper">
         <div class="individual-project"
         v-bind:key="project.id" 
         v-for="project in projectsCollection" 
         :title="project.title" 
         >
            <Project :project="project" 
            v-on:update-likes="updateLikes" 
            v-on:expand-card="expandCard"
            v-on:close-card="closeCard" />

        </div>
    </div>
</template>

<script>
import Project from './Project'

export default {
    name: 'Projects',
    data() {
        return {
            projectsCollection: [],
        }
    },

我需要根据project键的值实现调整卡片大小的功能（在本例中是“个人项目”div）。现在，我不能只使用:class="expanded-class, isExpanded"where isExpanded 是其中的一个键，project因为我需要遍历数组 (projectsCollection)，然后遍历一个对象来获取这个值。因此模板看不到这个键并且无法应用该类。

一个人将如何处理这项任务？我对 Vue 还很陌生，所以我试图动态地解决问题。

标签： vue.js

解决方案

您可以将:class（的简写v-bind:class）传递为：

  • 细绳：:class="'my-class'"
  • 目的：:class={'my-class': expression }
  • 大批：:class=['my-class', (expression ? 'if-true': 'if-false')]

文档。

因此，在您的情况下，它将是，它会在is时:class="{'expanded-class': project.isExpanded }"附加expanded-class类。project.isExpandedtrue

推荐阅读