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 を使用してマスタースレーブホットスタンバイを実装する方法の例
推薦する
nginx を介してローカルでリバースプロキシを構成するプロセス全体
序文Nginx は、イベント駆動型の非同期非ブロッキング処理フレームワークを使用する軽量 HTTP ...
面接で聞かれる可能性のあるCSSに関する質問
この記事は、100 回書かれ、質問された CSS の質問を記念するためのものです。聞く： CSS セ...
Vueプロジェクトがグラフィック検証コードを実装
この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...
CentOS 7 で RPM を使用して mysql5.7.13 をインストールする
0. 環境この記事のオペレーティング システム: CentOS 7.2.1511 x86_64 My...
HTMLにおけるbackground-image属性の設定の詳細な説明
写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているから...
HTML テーブル マークアップ チュートリアル (22): 行の境界線の色属性 BORDERCOLORLIGHT
行内では、明るい境界線の色を個別に定義できます。基本的な構文<TR ボーダーカラーライト=co...
HTML メタビューポート属性の詳細な説明
ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...
JavaScript 配列の include と Reduce の基本的な使用法
目次序文配列.プロトタイプ.includes文法パラメータ戻り値例配列プロトタイプの削減文法パラメー...
mysql MDLメタデータロックの詳細な分析
序文： MySQL で SQL 文を実行すると、予想した時間内に文が完了しません。このような場合、通...
スライダー検証コードを実装するJavaScript
この記事では、スライダー検証コードを実装するためのJavaScriptの具体的なコードを参考までに共...
Linux での SSH パスワードフリーログイン設定の詳細な説明
Linux サーバー A と B が 2 台あり、一方のサーバーから SSH 経由でパスワードなしで...
Vue 2.0 の基礎を詳しく解説
目次1. 特徴2. 例3. オプション4. 基本的な文法5. ライフサイクル6. ルーティング管理 ...
Javascriptでオブザーバーモードを実装する方法を教えます
目次オブザーバーパターンとは何ですか?シナリオシミュレーションコードの実装コードのリファクタリング要...
MySQL マルチバージョン同時実行制御 MVCC の詳細な研究
MVCC MVCC (Multi-Version Concurrency Control) は、マル...
MySQL ストアド プロシージャにおけるループ ステートメント (WHILE、REPEAT、LOOP) の使用法の分析
この記事では、例を使用して、MySQL ストアド プロシージャでのループ ステートメント (WHIL...