代码之家 › 专栏 › 技术社区 › fencepencil

VueJS:动态类绑定

vue.js javascript

0

fencepencil · 技术社区 · 7 年前

我有一个组件 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' 到特定页面。

2 回复 | 直到 7 年前

1

0

Kraken 7 年前

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

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>

2

0

Adam OrÅowski 7 年前

通过查看您的数据,只需键入:

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

克雷肯想改变你的方式:

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

在数据中键入:

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

this.color .