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>

因此，如您所见，我是否有我的平面道具，它将触发平面类以显示是否具有箱形阴影。但是我还希望有人触发应用程序道具，该道具将在标题中添加一些填充。

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

Answer 1

尝试将它们合并到相同的class属性中，如下所示：

<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
    }
}

如何在基于道具的元素上添加多个类？

3 个答案: