VueJS：动态类绑定

Question

Vue -V-3.0.5。

我有一个组件Cube.vue，我试图在其中动态地将蓝色或绿色类设置为子元素。

我已经创建了组件并将其导入到特定页面，但是我无法使or正常工作。

<template>
  <div :class="$style.cubeInner">
    <div class="cube" :class="{ 'cube--blue': isBlue ? 'cube--green': isGreen }">
      <div v-for="side in cubeside" :class="side.class" :key="side.id"></div>
    </div>
  </figure>
</template>

这是我的出口

export default {
  data() {
    return {
      Cube: 'cube',
      isBlue: Boolean,
      isGreen: Boolean,
    };
  }
};

我导入另一个组件并通过<cube-hover></cube-hover>进行渲染。我的问题是我需要为prop设置data()还是isBlue是对还是错？我似乎无法针对孩子，因为整个组件都在导入中。

基本上，我无法定位嵌套<div>的对象，它只是将类添加到父对象。我想将'cube--blue'或'cube--green'添加到特定页面。

Answer 1

将布尔值放入数据字段中，然后将条件检查放入计算函数中。

...已更新以添加上下文

export default {
    data: () => {
        ...
        isBlue: Boolean,
        isGreen: Boolean,
    },
    computed: 
        isBlue() {
            if (is it blue?) return true;
            return false;
        },
        isGreen() {
            if (is it green?) return true;
            return false;
        }
}

<template>
    ...
    <div class="cube" :class="{ isBlue ? 'cube--blue' : 'cube--green': isGreen }">
    <!-- I think this is where you went wrong: "'cube--blue': isBlue ? 'cube--green': isGreen" see note -->
</template>

注意

您有一个“？”分隔应该是逗号或要进行三元运算的类。逗号分隔可能一次同时应用，我怀疑您不希望这样。或者，如果您尝试进行条件类分配：

修复您的ternary syntax：

`condition ? value if true : value if false`

您错过了     : value if false部分

您可能想要的是：

`:class="isBlue ? 'cube--blue' : 'cube--green'"

最后

现在，我已经写了这个，我觉得我应该推荐一种不同的方法。假设此多维数据集是绿色或蓝色，但绝不会同时出现，那么您可能希望将逻辑合并为一个步骤。也许您想在getColor函数中使用条件条件？如果您将拥有两种以上的颜色，这将特别聪明。然后fn只是返回一种颜色，您可以将其插值到您的类名称中，例如：

<div :class="`cube--${color}`"></i>

Answer 2

我不明白您所说的“或”是什么意思。

通过查看数据，只需键入：

<div class="cube" :class="{ 'cube--blue': isBlue, 'cube--green': isGreen }">

---

更新： Kraken旨在改变您的方法：

<div class="cube" :class="`cube--${getColor}`">

，然后在您的数据中输入：

data() {
  return {
    color: 'blue',
  };
},
computed: {
  getColor() {
    return this.color;
  },
},

通过这种方法，您可以为将来准备更多的颜色做好准备。只需更新this.color。

Answer 3

<li
   v-for="item in items"
   :key="item.id"
   class="nav-item"
   :class="{ dropdown: hasChildren(item.children) }"
 >
   
 methods: {
    hasChildren(item) {
      return item.length > 0 ? true : false;
    },
 }

Answer 4

我认为这是解决这个问题的最好方法。

['₹2,149',
 '₹4,299',
 '₹2,149',
 '₹4,299',
 '₹3,369',
 '₹7,499',
 '₹2,449',
 '₹3,499',
 0,
 '₹9,999',
 ....