将自定义 class 添加到 div 元素

Question

我有一个自定义组件，我在其中传递一些数据以呈现一些 css 样式

喜欢

<title :profile="true" :class="true"/>

在我的组件中

我有一个 div 作为：

<div class="tabletitle">

我想如果我的自定义 class :class 是真的，我应该添加一个名为 flexdisplay 的新 class，比如

<div class="tabletitle flexdisplay">

我在这里遗漏了什么，我尝试将值作为 false 传递给数据，但它只是抛出随机错误

Answer 1

您可以使用class condition syntax

<div :class="{ "active": isActive }"></div>

如果 isActive 条件为 true

，这将把 active class

请注意，您可以组合 class 和 :class 属性来放置 class conditionnaly 和 classic class

<div class="myClass" :class="{ "active": isActive }"></div>

例如，在您的情况下，如果您有布尔值 class 道具，您的组件将如下所示：

<template>
   <div class="tabletitle" :class={"flexdisplay": isClass}>
      ...
   </div>
</template>
<script>
export default {
   props: {
      isClass: {
         type: Boolean,
         default: true
      }
   }
}
</script>

**注意：**我已经通过 isClass 更改了 class 道具，以便更好地理解并且不要与 class 键

混淆

Answer 2

让我们假设你的父组件是这样的

<title :profile="true" :showClass="true"/> <!-- modified props name from class to showClass

并且在您的子组件中，正如您所说，您有一个 div 如下所示

<div class="tabletitle">

你可以把上面的div改成下面的格式

<div :class="['tabletitle', {'flexdisplay': enableClass}]"> <!-- where enableClass will be a computed property

在你的子组件的脚本标签中，像下面这样定义道具和计算属性

<script>
export default {
 props: {
  showClass: {
     type: Boolean,
     default: false
  },
 }
 computed: { // The reason I am doing with computed is for better reactivity
  enableClass() {
   return this.showClass;
  }
 }
}
</script>

将自定义 class 添加到 div 元素

adding a custom class to the div element

vue.js

vue-component