vue2.0 はアクティブに動作し、他のオプションは相互に排他的です-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

vue2.0 はアクティブに動作し、他のオプションは相互に排他的です

php中世界最好的语言

Jun 08, 2018 pm 01:59 PM

active vue 相互排他的

今回は vue2.0 動作アクティブの他のオプションの相互排他についてお届けします。 vue2.0 動作アクティブの他のオプションの相互排他についての注意点は何ですか。実際のケースを見てみましょう。通常のjsのz

。クリックしてアクティブを選択し、他のものをキャンセルする効果を実現したい場合は、クリック時に複数の DOM のアクティブクラスをキャンセルするクラスを定義し、このクラス名を現在の要素に追加します。非常に冗長なので、次に進みます。早速、コードを見てみましょう (投稿者が jq を使用していることを意味します):

 <style>
  * {
   margin: 0;
   padding: 0;
  }
  li {
   list-style: none;
   width: 100px;
   margin-top: 10px;
   border: 1px solid red;
  }
  li:active {
   cursor: pointer;
  }
  .active {
   background-color: aqua;
  }
 </style>
 <script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
</head>
<body>
<ul>
 <li>this is pne</li>
 <li>this is two</li>
 <li>this is three</li>
</ul>
</body>
<script>
 $(() => {
  $("li").click((e) => {
   $("li").removeClass("active");
   $(e.target).addClass("active");
  })
 })
</script>

ログイン後にコピー

効果は以下の図に示すとおりです:

ただし、vue では dom 操作を実行することはお勧めできません。 domを行う必要がない場合は、vue2.0 domの効果を実現できるref属性があります。次に、dom をキャッチせずに操作を実行しましょう:

私は webpack と vue-cli スキャフォールディングに慣れているので、投稿者のすべての Vue コードは webpack スキャフォールディングに配置され、コードである pug と scss プリプロセッサも使用されます。

<template lang="pug">
 ul
  li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is {{item}}
</template>
<style lang="scss">
 li {
  list-style: none;
  width: 100px;
  margin-top: 10px;
  border: 1px solid red;
  &:hover {
   cursor: pointer;
  }
 }
 .active{
  background-color: aqua;
 }
</style>
<script>
 export default{
  data(){
   return {
    classArr: ["one", "two", "three"],
    num:"",
   }
  },
  methods: {
    result(index){
     this.num = index;
    }
  },
  computed:{
    resultNum(){
     return this.num;
   }
  }
 }
</script>

ログイン後にコピー

アイデアは次のとおりです:

このコードはキーワードインデックスを使用し、現在のインデックスインデックスが現在の要素のクリック時間の添字と同じである場合、計算された属性も使用します。アクティブなクラス名がトリガーされます。非常に簡潔にまとめられているので、理解できない場合は、ブロガーと一緒に議論してください

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトです！

推奨読書:

Vue-cropperで写真をトリミング

Element-UIテーブルを使用してドラッグアンドドロップ機能を実装

以上がvue2.0 はアクティブに動作し、他のオプションは相互に排他的ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1677

CakePHP チュートリアル

1431

Laravel チュートリアル

1333

PHP チュートリアル

1279

C# チュートリアル

1257

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

Vueによる前のページに戻る方法 Apr 07, 2025 pm 11:30 PM

vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。

Vue Multi-Page開発とはどういう意味ですか？ Apr 07, 2025 pm 11:57 PM

VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。

React vs. Vue：Netflixはどのフレームワークを使用していますか？ Apr 14, 2025 am 12:19 AM

netflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.

VUEトラバーサルの使用方法 Apr 07, 2025 pm 11:48 PM

Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。