Vueはシンプルな画像切り替え効果を実装します

Vueはシンプルな画像切り替え効果を実装します

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。

コード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>画像スイッチ</title>
    <スタイル タイプ="text/css">
        *{
            パディング: 0;
            マージン: 0;
        }
        #アプリ{
           位置: 絶対;
           幅: 100ピクセル;
           高さ: 100px;
           上: 100px;
           左: 400px;
        }

       #左{
           位置: 相対的;
           上:-240px;
           左: -45px;
           フォントサイズ: 50px;
       }

       #右{
           位置: 相対的;
           上: -300px;
           左: 595ピクセル;
           フォントサイズ: 50px;
       }

       {
           色: 黒;
           テキスト装飾: なし;
       }
    </スタイル>
</head>
<本文>
    <div id="アプリ">
        <!-- 投票する画像 -->
      <img :src="imgArr[インデックス]"/>
      <!-- 左矢印 -->
      <a href="javascript:void(0)" id="left" @click="prev" v-show="index!=0">《</a>
      <!-- 右矢印 -->
      <a href="javascript:void(0)" id="right" @click="next" v-show="index<imgArr.length-1">》</a>
    </div>
    <スクリプト>
        var アプリ = 新しい Vue({
            el: "#app",
            データ: {
                画像:[
                    "img/1.jpg",
                    "img/2.jpg",
                    "img/3.jpg",
                    "img/4.jpg",
                    "img/5.jpg",
                ]、

                インデックス: 0,

            },
            メソッド: {
                前: 関数(){
                    this.index--;
                },
                次へ: 関数(){
                    this.index++;
                },
            }
        })
    </スクリプト>
</本文>
</html>

要約:

  • リストデータは配列を使用して保存されます。
  • v-bindディレクティブはsrcなどの要素属性を設定できます。
  • v-showv-ifはどちらも要素の表示状態を切り替えることができますが、頻繁な切り替えにはv-showが推奨されます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue マウスホイールスクロール切り替えルーティング効果を実装する方法
  • Vueはマウスホイールのスクロールによるページ切り替えを実装しています
  • Vueはスワイパーを使用して左右にスライドすることで画像を切り替える
  • Vueはボタン切り替え画像を実装します
  • Vue カスタム js 画像フラグメント カルーセル切り替え効果実装コード
  • Vueは画像切り替え効果を実現
  • Vueはbase64でエンコードされた画像間の切り替え機能を実装します
  • Vue カードスタイルのクリックして切り替える画像コンポーネントの使用方法の詳細な説明
  • Vue+js 矢印をクリックして画像を切り替える
  • Vue はマウスホバーで画像のソースを切り替える機能を実装しています

<<:  MySQL マスタースレーブ同期遅延の原因と解決策

>>:  Docker+keepalived+nginx を使用してマスタースレーブホットスタンバイを実装する方法の例

推薦する

最新のmysql-5.7.21のインストールと設定方法

1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...

MySQLデータベース移行により、大量のデータを迅速にエクスポートおよびインポートできます

データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...

Nginx 運用保守ドメイン名検証方法例

インターフェイス ドメイン名を構成する際、各パブリック プラットフォームはドメイン名に対する開発者の...

MySQLデッドロック問題の詳細な分析

序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...

シンプルなナビゲーションバー機能を実現するHTML+CSS

さっそく、コードを見てみましょう(初心者:特に言うことはありません) <!DOCTYPE ht...

CentOS7 は rpm を使用して MySQL 5.7 をインストールするチュートリアル図

1. 4つのrpmパッケージをダウンロードする mysql-コミュニティクライアント-5.7.26-...

シンプルなスネークゲームを実現するネイティブjs

この記事では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

NexusはAPIを使用して操作します

Nexus は RestApi を提供していますが、一部の API はまだ Groovy と組み合わ...

Vue における ref と $refs の紹介と使用例

序文JavaScript では、document.querySelector("#demo...

MySQL ログインおよび終了コマンドの形式

mysql ログインのコマンド形式は次のとおりです。 mysql -h [hostip] -u [ユ...

純粋なテキストとアイコン付きのボタンを実現するための HTML+CSS

この記事では、いくつかの基本的なページ要素の実装方法をまとめており、後で更新される予定です。まず、私...

MySQL の完全なデータベース バックアップ データを使用して単一のテーブル データを復元する方法

序文データベースをバックアップするときは、データベース全体のバックアップを使用します。ただし、何らか...

PrometheusとGrafanaを使用したMySQLサーバーのパフォーマンス監視の詳細な説明

概要Prometheus は、HTTP プロトコルを介してリモート マシンからデータを収集し、ローカ...

JSで実施された機雷掃海プロジェクトの概要

この記事では、JS掃海プロジェクトの概要を参考までに紹介します。具体的な内容は次のとおりです。プロジ...

MySQL 5.7.17無料インストール版のインストールと設定

MYSQLバージョン:MySQL Community Server 5.7.17、インストール不要版...