如何在 vue.js 2 中分离父动态类 css答案

【问题标题】：How to detach the parent dynamic class css in vue.js 2如何在 vue.js 2 中分离父动态类 css
【发布时间】：2020-11-18 18:44:05
【问题描述】：

这里我的问题是我正在应用一个动态类，其中 opacity 存在于父类中，并且由于它也适用于其中的 div 并且对于 1 个特定的 div 我不需要这个动态不透明度如何改变它。

下面是我的代码

css

.cancelled {
    opacity: 0.25;
  }

Vue

在方法中提到了如下条件

 <section
      class="checkitem"
      v-for="(item, index) in data"
      :key="index"
      :class="getProgram(index, item)"
    >
    <div class="class1"> </div>
    <div class="class2"> </div>
    <div class="class3"> </div>
  </section>

这里 getProgram(index, item) 有一个不透明度，它正在将它添加到 class1,class2 所以这里我不希望将不透明度添加到 class1 & class 2

方法：--

 getProgram(index, item) {
      return [{ cancelled: item.cancelled }];
    },

【问题讨论】：

所有子元素将始终继承其父元素的不透明度，并且永远不会更大。
@BoussadjraBrahim 我不希望将不透明度添加到 class1 和 class 2
你的问题不清楚！
看来您不了解 CSS 的工作原理。如果一个父级有opacity: 0.25;，这意味着里面的所有html都将继承这种风格。如果您不希望 class1 和 class2 继承此不透明度，则需要在父级之外渲染它们。

标签： javascript css vue.js sass vuejs2

【解决方案1】：

我们在 cmets 中已经有了答案。我只是把它作为一个答案。

所有子元素将始终继承其父元素的不透明度，并且永远不会更大。 (c) 渡轮 Kranenburg

看来您不了解 CSS 的工作原理。如果父母有不透明度：0.25；这意味着里面的所有html都将继承这种风格。如果您不希望 class1 和 class2 继承此不透明度，则需要在父级之外渲染它们。 (c) 亚当·奥尔洛夫

所以这里的问题是：如果你给父类添加不透明度，那么里面的所有项目都会有这个不透明度的最大值。

解决方案：不要给父类添加不透明度，而是给子类添加不透明度。所以对于你原来的问题here i dont want opacity to be added to class1 & class 2，你只需要更新CSS：

.cancelled .class3 {
    opacity: 0.25;
}

这样只有 class3 会有不透明度，而不是你想要的 class1 和 class2。

可能的问题：您可以将一些样式应用于父级，并且您希望它们也是半透明的（背景或其他）。

然后你需要将所有这些东西移动到新的内部元素：

 <section
      class="checkitem"
      v-for="(item, index) in data"
      :key="index"
      :class="getProgram(index, item)"
    >
    <div class="all-the-stylings-from-parent-go-here"></div>
    <div class="class1"> </div>
    <div class="class2"> </div>
    <div class="class3"> </div>
  </section>

所以 CSS 将是：

.cancelled .class3, .cancelled .all-the-stylings-from-parent-go-here {
    opacity: 0.25;
}

【讨论】：

【解决方案2】：

根据您的问题，尚不完全清楚将子项排除在应用不透明度之外的标准是什么，但在 CSS 中您可以执行以下操作：

.cancelled > div:not(.class1):not(.class2){
    opacity: 0.25;
}

这只会将不透明度应用于您示例中的第三个div。如果您想更动态地执行此操作，您可以将一个类应用于子元素，然后在 CSS 选择器中排除该类。

这是一个简单的例子，只是为了给你一个想法：

 <section
     class="checkitem"
     v-for="(item, index) in data"
     :key="index"
     :class="getProgram(index, item)"
 >
    <div class="class1" :class="isExcluded('yes') ? 'is-excluded' : ''">Div 1</div>
    <div class="class2" :class="isExcluded('yes') ? 'is-excluded' : ''">Div 2</div>
    <div class="class3" :class="isExcluded('no') ? 'is-excluded' : ''">Div 3</div>
  </section>

还有：

methods: {
    isExcluded(param) {
        return param === 'yes';
    }
}

CSS：

.cancelled > div:not(.is-excluded) {
    opacity: 0.25;
}

【讨论】：

【解决方案3】：

将部分样式设置为opacity: 1; position:relative;
创建一个额外的内部 div，该 div 不会包装当前子元素，并将部分中的所有样式应用到它（您可以使用 checkitem 类）。然后根据需要更改此 div 不透明度。

 <section
      class="checkitem__wrapper"
      v-for="(item, index) in data"
      :key="index"
    >
    <div class="checkitem" :class="getProgram(index, item)"></div>
    <div class="class1"> </div>
    <div class="class2"> </div>
    <div class="class3"> </div>
  </section>

如果您有内边距、边距和边框，则需要进行额外的调整 — 将它们移动到 .checkitem__wrapper

.checkitem__wrapper {
  position: relative;
}
.checkitem {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
}
.cancelled {
  opacity: 0.25;
}

【讨论】：