この記事では、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 を使用してマスタースレーブホットスタンバイを実装する方法の例
本日、会社の内部サーバーにログインしたところ、リモートアクセスができませんでした。エラー メッセージ...
最近、CSS3に関する知識や記事をたくさん読んできましたが、CSS3はとても便利に使えると思います。...
時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...
目次1. はじめに2. 本文2.1 フィールドの連結2.2 フィールドでの算術計算の実行1. はじめ...
目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...
コンテンツ プロパティは CSS 2.1 で導入され、:before および :after 疑似要素...
1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...
目次1. 効果2. メインコード1. 効果機能: インターフェイスから取得したデータを使用してオプシ...
//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...
1. コンテナにnginxサービスをデプロイするcentos:7 イメージはコンテナを実行し、このコ...
ウェブページを作成するときに、フォームを挿入した後、フォームの上下に空白行が表示されることがよくあり...
iPad でページをデバッグするにはどうすればいいですか? iOS 5 をご利用の場合、iPad の...
目次1. 現象2. 解決策3. 要約: 1. 現象1. 要件: 特定の表示ページをキャプチャしてアル...
目次索引- 総合索引- ユニークなインデックス- 主キーインデックス- 複合インデックス- 全文索引...
私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...