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データベースの使用シナリオの説明
推薦する
Vue での mixin の応用について議論する
Mixin は、再利用可能な機能を Vue コンポーネント間で分散する非常に柔軟な方法を提供します。...
Ubuntu サーバーで MySQL を設定し、リモート接続を実装する方法
サーバー: Ubuntu Server 16.04 LSSクライアント: Ubuntu 16.04 ...
Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明
ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...
LinuxソースコードからTIME_WAITの期間を分析する
目次1. はじめに2. まずLinux環境を紹介しましょう3. TIME_WAIT状態遷移図4. 継...
Javascript 構造化代入の詳細
目次1. 配列の分解2. オブジェクトの分解3. 不完全な解体4. 分割代入を使用して変数交換を実装...
MySQL のストアド プロシージャを使用して 100 万件のレコードをすばやく生成する方法
序文テストを行う際、大量のデータによる負荷に耐えるプロジェクトの能力をテストするために、通常はテスト...
CSS を使用して波状のウォーターボール効果を実装するためのサンプルコード
今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです HTML:...
Linux での crontab スケジュール実行コマンドの詳細な説明
LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | grep ...
docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析
この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...
航空機戦争ゲームを実装するためのネイティブJS
この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...
Nginx SSL証明書設定エラーの解決策
1. はじめにWeb プロジェクトを Linux サーバーで公開する場合、SSL 証明書を構成する必...
WeChatアプレットはふるいを振る効果を実現
この記事では、WeChatアプレットの具体的なコードを参考までに共有します。具体的な内容は次のとおり...
MySQL で指定エンコーディングを実装する際の落とし穴について
前面に書かれた環境: MySQL 5.7+、MySQL データベースの文字エンコードは utf8、テ...
データベース内のSQL整合性制約ステートメントの分析
整合性制約整合性制約はテーブル データの正確性を保つためのものです。データが正しくない場合は、そもそ...
Docker Compose マルチコンテナデプロイメントの実装
目次1. WordPressの導入1. 環境を整える(II) イメージを実行するDocker の作成...