如何使用 Vue.js 为基于 props 的元素添加多个类？

Question

先看我的代码理解问题。

<template>
    <div class="header" 
        :class="flat ? 'flat' : null"
        :class="app ? 'app' : null">
    </div>
</template>

<script>
    export default {
        props: {
            flat: {
                type: Boolean,
                default: false
            },
            app: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style lang="scss">
    .header {
        width: 100%;
        height: 55px;
        background: white;
        box-shadow: 0px 3px 6px #ccc;
        transition: .8s ease-in-out;

    }
    .flat {
        box-shadow: none;
    }
    .app {
        padding-left: 10%;
        padding-right: 10%;
    }

</style>

所以你可以在这里看到我有我的平面道具，它将触发一个平面类来显示一个盒子阴影。但我也希望有人触发将在标题中添加一些填充的应用程序道具。

这里的问题是你不能在一个元素中放置多个 :classes。 有什么解决办法吗？

Answer 1

尝试将它们组合在同一个类属性中，如下所示：

<div class="header"
  :class="{ 'flat':flat,'app' : app}"
>header</div>

见official documentation

Answer 2

有几种方法可以实现您想要做的事情，Vue 在这方面做得很好。

1.传递一个类数组

<div 
  class="header" 
  :class="[flat ? 'flat' : null, app ? 'app' : null]"
></div>

2。传递一个对象

<div 
  class="header" 
  :class="{flat: flat, app: app}"
></div>

这里，只有具有真实值的道具才会被设置为类。

2.1 如果您使用的是 ES6 可以使用对象属性值的简写

<div 
  class="header" 
  :class="{flat, app}"
></div>

奖金

如果需要，你也可以混合使用 1 和 2（我有时需要它）

<div 
  class="header" 
  :class="[{flat, app}, someOtherClass]"
></div>

Answer 3

您可以创建一个返回与@Boussadjra Barhim 答案相同的对象的方法。

//if value is evaluated into true, the key will be a part of the class
setClass: function(flat, app){
    return {
      flat: flat, 
      app: app
    }
}

通过

使用

<element :class="setClass(flat, app)" />

但在这种情况下，您可以编写其他更长的代码（无需丑化模板）在返回对象之前处理值

setClass: function(flat, app){
    //do something else with inputs here
    return {
      flat: flat, 
      app: app
    }
}