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 を使用してマスタースレーブホットスタンバイを実装する方法の例
推薦する
JavaScript配列の一般的なメソッドの詳細な説明
目次元の配列を変更しない方法1. 連結文法：パラメータ:戻り値: 2. 参加する文法：パラメータ:戻...
Alibaba Cloud Server Ubuntu 設定チュートリアル
Alibaba Cloud のカスタム Ubuntu イメージのインポートには、OSS スナップショ...
Vue 3 カスタムディレクティブ開発の概要
指令とは何ですか? Angular と Vue はどちらもディレクティブの概念を持っており、これは通...
Nginx の純粋な構成でリアルタイム ログ レポートを実現するためのアイデアと方法
目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...
CSSに基づいてマウス入力の方向を決定する
以前、フロントエンド技術グループに所属していたとき、グループのメンバーが面接中に問題に遭遇したと言っ...
yum の基本的な使い方と例（推奨）
yumコマンドYum (フルネームは Yellow dog Updater, Modified) ...
Vue Routerはバックグラウンドデータに応じて異なるコンポーネントをロードします
目次実際のプロジェクトで遭遇する要件実装が間違っているところもある私は個人的に、実装するより良い方法...
Linux システムで TCP 接続を作成するプロセスの紹介
目次LinuxでTCPを作成する手順サーバクライアントTCP確立プロセスサンプルコードLinuxでT...
Vue3 (III) ウェブサイトホームページレイアウト開発
目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...
収集する価値のあるCSS命名規則（ルール） よく使われるCSS命名規則
CSS命名規則（ルール） よく使われるCSS命名規則ヘッダー: ヘッダーコンテンツ: コンテンツ/コ...
CentOS7でXShellとネットワーク設定を接続する方法
1. Linuxネットワーク構成ネットワークを構成する前に、まずローカル IPv4 アドレスやデフォ...
VMware に Centos8 をインストールする詳細なチュートリアル
CentOS公式サイトアドレスhttps://www.centos.org/まず必要なファイルをダウ...
MySQL の自動増分 ID に関するいくつかの小さな問題の要約
以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...
MySQLはテーブル内のフィールドを別のテーブル内のフィールドの値と等しくなるように更新します
以下のように表示されます。 table1 を z として更新し、table2 を zb として結合し...
MySQL で lower_case_table_names を記録する際の落とし穴の詳細な説明
1 原因プロジェクトがデータベースを移行して再起動した後、「T_AAAテーブルが存在しません」という...