Vue Jsでメニューループのアクティビティクラスを動的に追加するにはどうすればよいですか?
P粉793532469
2023-08-25 20:24:48
<p>メニューを動的に表示するループにアクティブなクラスを追加するにはどうすればよいですか?開いたメニューにアクティビティ クラスを設定できません。 </p>
<pre class="brush:php;toolbar:false;"><a v-bind:href="module.route" class="nav-link">
//module.route はデータベース列です
<i :class="モジュール.アイコン" ></i>
//module.icon はデータベースの列です
<p>
{{ モジュール.名 }}
//module.name はデータベースの列です
</p>
</a></pre>
</li>
<p>データベースからメニューリストを表示します。ここで、開いているメニューをアクティブにしたいだけです。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
＃＃＃これは私がしました。
リーリー
必要なタブをすべてtabs
これにより、配列という配列に追加しました。リーリーtabs
変数内のtabごとに<li>要素が作成されます。active_tab
がtab## と等しい場合、すべての要素はnav-linkクラスを持ち、v-bindを使用します。 # は、要素のクラス リストにactiveを追加します。ユーザーがいずれかのタブをクリックするたびに、@clickを使用して、active_tabをユーザーがクリックしたtabに変更します。スタイル＃＃＃ リーリー