Vue.jsは画像切り替え機能を実装する
|
この記事では、画像切り替え機能を実装するためのVue.jsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 機能は以下のとおりです
ファイルディレクトリは以下のとおりです。この機能を実装するには、画像の保存場所を変更するだけです。
コードは次のとおりです
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<タイトル></タイトル>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<スタイル タイプ="text/css">
div {
マージン: 0 自動;
幅:200px;
高さ: 300px;
境界線: 1px 水色;
}
画像 {
マージン: 0 自動;
幅: 200ピクセル;
高さ: 250px;
境界線: 1px 水色;
}
</スタイル>
<本文>
<div id="アプリ">
<img :src="imgSrc[インデックス]" >
<button type="button" @click="prephoto()">前の写真</button>
<button type="button" @click="nextphoto()">次の写真</button>
</div>
<script type="text/javascript">
var アプリ = 新しい Vue({
el:"#アプリ",
データ：{
画像ソース:["./img/1.jpg","./img/2.jpg"],
インデックス:1
},
方法:{
プレフォト:function(){
this.index--;
if(this.index===-1)
{
this.index=this.imgSrc.length-1;
}
コンソールログ(this.index)
},
次の写真:関数(){
this.index++;
if(this.index===this.imgSrc.length){
this.index=0;
}
コンソールログ(this.index)
}
}
})
</スクリプト>
</本文>
</html>初心者にも最適です。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: cobbler ベースの Linux システムを自動的にインストールする
>>: SQLと各種NoSQLデータベースの使用シナリオの説明
推薦する
MySQLとSpringの自動コミットの詳細な説明
1 MySQLの自動コミット設定MySQL はデフォルトで自動的にコミットします。つまり、各 DML...
Vue の動的コンポーネントと非同期コンポーネントの詳細な理解
1. 動的コンポーネント <!DOCTYPE html> <html> &l...
JavaScript のクロージャの詳細な説明
導入クロージャは JavaScript の非常に強力な機能です。いわゆるクロージャは関数内の関数です...
MySQL 文字セットの概要
目次文字セット比較ルール4つのレベルの文字セットと比較規則3つのシステム変数このノートは主にMySQ...
このリファレンスとJavaScriptのカスタムプロパティの詳細な説明
目次1. このキーワード2. カスタム属性3. 包括的なケース1：タブの実装付録要約する1. このキ...
MySQL の group by と having の詳細な説明
GROUP BY 構文を使用すると、指定されたデータ列の各メンバーに従ってクエリ結果をグループ化して...
フロントエンドは画像を遅延ロードする方法を知っている必要があります（3つの方法）
目次1. 遅延読み込みとは何ですか? 2. 遅延読み込みを実装する🌄: 2.1 最初の方法: 2.2...
基礎知識: ウェブサイトのアドレスの前の http はどういう意味ですか?
HTTPとは何ですか?ウェブサイトを閲覧したいときは、ブラウザのアドレス バーにウェブサイトのアド...
docker で Apollo をデプロイする詳細なチュートリアル
1. はじめにここでは apollo について詳しく説明しません。公式サイト https://git...
JavaScript キャンバスでカラフルな太陽のハロー効果を実現
この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...
個人ブログシステムを構築するためのDockerの超シンプルな実装
Dockerをインストールするyumパッケージを最新バージョンに更新します: sudo yum up...
MYSQL ロック解除とロックテーブルの紹介
MySQL ロックの概要他のデータベースと比較すると、MySQL のロック メカニズムは比較的単純で...
LinuxサーバにおけるNginxとApacheの共存の実装方法の分析
この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...
Mysql SQL ステートメント演習 (50 問)
テーブル名とフィールド–1. 学生リスト学生 (s_id、s_name、s_birth、s_sex)...
JavaScript における BOM と DOM の詳細な説明
目次BOM (ブラウザ オブジェクト モデル) 1. ウィンドウブラウザのウィンドウサイズを取得する...