如何在 vue.js 2 中分離父動態類 css

Question

在這里，我的問題是我正在應用一個動態類，並且父類中存在不透明度，並且由於它也適用於其中的 div，對於 1 個特定的 div，我不需要這種動態不透明度，我該如何更改它。

下面是我的代碼

css

.cancelled {
    opacity: 0.25;
  }

視圖

在方法中提到了如下條件

 <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 }];
    },

Answer 1

從您的問題來看，從應用的不透明度中排除子項的標准並不完全清楚，但在 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;
}

Answer 2

1. 將部分樣式設置為opacity: 1; position:relative; opacity: 1; position:relative;
2. 創建一個額外的內部 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;
}

Answer 3

我們已經在評論中給出了答案。 我只會把它作為答案。

所有子元素將始終繼承其父元素的不透明度，並且永遠不會更大。 (c) 克拉嫩堡渡輪

看起來你不明白 CSS 是如何工作的。 如果父級具有不透明度：0.25； 這意味着里面的所有 html 都將繼承這種風格。 如果您不希望 class1 和 class2 繼承此不透明度，則需要將它們呈現在父級之外。 (c) 亞當·奧爾洛夫

所以這里的問題是：如果你給父類添加不透明度，那么里面的所有項目都會有這個不透明度的最大值。

解決方案：不要給父類添加不透明度，而是給子類。 因此，對於您here i dont want opacity to be added to class1 & class 2的原始問題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;
}