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可視化ツールNavicatへの接続方法
Navicatをインストールした後次のエラーが発生する場合があります: Client does no...
Vueプロジェクトでコンポーネントをカプセル化する簡単な手順
目次序文Toastコンポーネントをカプセル化する方法ユースケース具体的な実装要約する序文ビジネスが発...
URL 内の特殊記号の意味を知っていますか?
1.# # は Web ページ内の場所を表します。右側の文字はその位置の識別子です。たとえば、ht...
VueはEchartsを使用して3次元棒グラフを実装します
この記事では、Echartsを使用して3次元棒グラフを実装するVueの具体的なコードを参考までに共有...
jQueryは画像追従効果を実現します
この記事では、画像フォロー効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...
ノードイベントループとメッセージキューの分析
目次非同期とは何ですか?なぜ非同期性が必要なのでしょうか?非同期IOとは何ですか?イベントループとは...
ネイティブ JS オブジェクト指向タイピング ゲーム
この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...
MySQL インストール プロンプト「詳細なヘルプについては NET HELPMSG 3534 と入力してください」の解決方法
今日、MySQL をインストールすると次のエラー メッセージが表示されます。 かなり長い時間ネットで...
MySQL タイムスタンプ比較クエリで遭遇する落とし穴と解決策
目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...
負荷分散の基礎知識とnginxを使用した負荷分散の簡単な例
Nginx は、一般的に 7 層の負荷分散に使用できます。この記事では、負荷分散に関する基本的な知識...
Mysql5.7 のルートパスワードを忘れた場合の対処法 (シンプルで効果的な方法)
前回の記事では、MySQL 5.7でルートパスワードを忘れた場合と、MySQL 5.7でルートパスワ...
MySQLログに関する知識のまとめ
目次SQL実行順序ビンログ何ですかいつ生産されるのか何の役に立つんだディスクはいつドロップされますか...
VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストール プロセス
目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...
JavaScript はドラッグ可能なモーダルボックスを実装します
この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...
react-beautiful-dnd はコンポーネントのドラッグ アンド ドロップ機能を実装します
目次1. インストール2.APi 3. react-beautiful-dnddemo 3.1dem...