Vue3: 親 div のクラスに基づいて子の div を条件付きで表示します

Question

私は Vue を初めて使用するもので、Vue3 カルーセル プラグインでこのアクティビティ クラスの例に取り組んでいます。クラス carousel__slide--active のテキストとリンク div のみを表示したかったのですが、すべての carousel__items が対応するテキストとリンクを表示するようになりました。サブクラス carousel__slide--active に対して v-if または v-bind を実行して image.text と image.link を表示できるはずですが、どちらも表示できません。仕事。アドバイスをいただければ幸いです。

関連コード:

ああああ

Answer 1

CSS を使用してこの問題を解決することもできますが、「vue-way」を使用する場合は、現在のスライドを確認してコンテンツを表示するかどうかを決定する必要があります。

使用法に関するドキュメントは (私が言うには) あまり明確ではありませんが、ソース コードを見ると、Carousel コンポーネントが modelValue を使用して次のことを行っていることがわかります。現在のインデックスをバインドします。

＃＃＃テンプレート：＃＃＃

     したがって、インデックス (

i

in v-for="(image, i) in stack.images") があり、それを currentSlide で実行します。比較する＃＃＃