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 を使用してマスタースレーブホットスタンバイを実装する方法の例

推薦する

Windows Server 2012 リモート デスクトップ ライセンス サーバーがライセンスを提供できず、リモート セッションが切断される

本日、会社の内部サーバーにログインしたところ、リモートアクセスができませんでした。エラー メッセージ...

純粋な CSS3 でペットの鶏のサンプルコードを実現

最近、CSS3に関する知識や記事をたくさん読んできましたが、CSS3はとても便利に使えると思います。...

ウェブ画像のホットリンクと座標値を設定するサンプルコード

時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...

MySQL の結合フィールドの Concat()

目次1. はじめに2. 本文2.1 フィールドの連結2.2 フィールドでの算術計算の実行1. はじめ...

Node.JS で悪天候のリアルタイム警報システムを構築する

目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...

CSS カウンターとコンテンツの概要

コンテンツ プロパティは CSS 2.1 で導入され、:before および :after 疑似要素...

Centos で MySQL パスワードを変更する方法

1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...

elementui での el-cascader カスケードセレクタの実践

目次1. 効果2. メインコード1. 効果機能: インターフェイスから取得したデータを使用してオプシ...

http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...

Dockerコンテナにnginxを簡単にデプロイするプロセスの分析

1. コンテナにnginxサービスをデプロイするcentos:7 イメージはコンテナを実行し、このコ...

上下に空白行があるフォームを挿入する解決策

ウェブページを作成するときに、フォームを挿入した後、フォームの上下に空白行が表示されることがよくあり...

Firebug ツールを使用して iPad でページをデバッグする

iPad でページをデバッグするにはどうすればいいですか? iOS 5 をご利用の場合、iPad の...

React-Native スクリーンショットコンポーネント react-native-view-shot の紹介と使い方のまとめ

目次1. 現象2. 解決策3. 要約: 1. 現象1. 要件: 特定の表示ページをキャプチャしてアル...

MySQL のインデックスの種類と基本的な使用例

目次索引- 総合索引- ユニークなインデックス- 主キーインデックス- 複合インデックス- 全文索引...

mysql ERROR 1045 (28000) 問題の解決方法

私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...