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>要約:
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker+keepalived+nginx を使用してマスタースレーブホットスタンバイを実装する方法の例
推薦する
VMwareがモジュールディスクを早期に開けない場合の解決策の詳細な説明
VMWare (Virtual Machine ware) は、「仮想 PC」ソフトウェア会社です。...
Nginx の http リソース リクエスト制限の詳細な説明 (3 つの方法)
前提条件: nginx には、ngx_http_limit_conn_module モジュールと n...
Dockerはポートマッピングを設定しますが、ソリューションにアクセスできません
#docker ps チェック、すべてのポートがマップされています コンテナID イメージ コマンド...
レム適応の一般的なパッケージ3つについて
序文以前、rem適応についての記事を書きましたが、具体的なパッケージは紹介しませんでした。今日は、よ...
Docker で TLS と CA 認証を有効にする方法
目次1. 証明書を生成する2. リモートを有効にする3. リモート接続3.1 Jenkins接続3....
ユーザーエクスペリエンスの要素またはWebデザインの要素
システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...
Linux環境にMySQLデータベースをインストールする詳細なチュートリアル
1. データベースをインストールする1) yum -y install mysql-server (...
MySQL Limitクエリのパフォーマンスを向上させる方法
MySQL データベース操作では、一部のクエリを実行するときにデータベース エンジンが完全なテーブル...
Windows での MySQL 8.0.11 インストール チュートリアル
この記事は、WindowsでのMySQL 8.0.11のインストールチュートリアルを記録しています。...
複数の例で HTML フォームを使用する方法
参考までに、HTMLフォームの使い方を9つの簡単な例で分析します。具体的な内容は次のとおりです。 1...
Web ページの HTML コードの説明: 順序付きリストと順序なしリスト
このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにお...
Docker環境でJenkinsを設定すると、タスクをビルドするときにコンソールログに文字化けした中国語の文字が表示されます
目次1. 問題の説明: 2. Jenkins設定のトラブルシューティング3. コードログのエンコード...
ウェブ開発で遭遇した問題と経験
<br />以下は開発中に遭遇した問題と、そこから得た経験です。デバッグに時間がかかりま...
NodeJSとブラウザにおけるこのキーワードの違い
序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...
ビューポートの基本原理と詳細な使用方法
1. ビューポートの概要モバイル ブラウザは通常、画面よりも幅の広い仮想ウィンドウにページをレンダリ...