Vue.jsダイナミックスタイルアプリケーション：ブール値に基づいて要素マージンを正しく変更する方法は？

Vue.jsダイナミックスタイル：CSSセレクターを巧みに使用して、マージンの変更の問題を解決します

VUE.JS開発では、要素スタイルの動的調整が一般的な要件です。この記事では、ブール値に基づいて要素マージンを動的に変更する問題を解決します。

問題の説明：

開発者は、動的クラス名がactiveに結合することにより、要素のマージンを制御しようとします。ブールのiscollapse変更されると、 activeクラス名を追加または削除して、要素のpadding-left変更する必要があります。ただし、最初のCSSコードは無効です。

コードスニペット：

VUEコンポーネントコード：

<div :class="{ active: iscollapse }" class="content">
  <myheader :iscollapse="!iscollapse"></myheader>
</div>

データ（） {
  戻る {
    iscollapse：false
  };
}、
方法：{
  changemenu（）{
    this.iscollapse =！this.iscollapse;
  }
}

無効な初期CSSコード：

 。コンテンツ {
  パディング左：200px;
  。アクティブ {
    パディング左：65px;
  }
}

問題分析：

問題は、CSSセレクターの使用です。初期コードでは、 .active Selector .content .active .content使用します。実際、 activeクラスは.content要素に直接作用します。

解決：

正しいCSSセレクターは、組み合わせ.content.activeである必要があり、 .content要素が同時にactiveクラスを持っている場合にのみ、スタイルが適用されるようにします。

正しいCSSコード：

 。コンテンツ {
  パディング左：200px;
}
.content.active {
  パディング左：65px;
}

または、SASSを使用する方が簡単です：

 。コンテンツ {
  パディング左：200px;
  ＆。アクティブ {
    パディング左：65px;
  }
}

SASSコードは、コンパイル後の上記のCSSコードに相当します。どちらもpadding-left: 65pxスタイルが、 .content要素が同時にactiveクラスを持っている場合にのみ適用され、初期コードの子孫セレクターによって引き起こされるスタイルの故障の問題を解決することを保証します。

以上がVue.jsダイナミックスタイルアプリケーション：ブール値に基づいて要素マージンを正しく変更する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。