ホームページ ウェブフロントエンド jsチュートリアル vue2.0 は、すべての画像をロードするメソッドをループします。

vue2.0 は、すべての画像をロードするメソッドをループします。

Apr 12, 2018 am 10:14 AM
負荷

今回は、vue2.0 ですべての 画像をループしてロードする方法について説明します。vue2.0 ですべての画像をループしてロードする場合の 注意事項 は何ですか?実際のケースを見てみましょう。 。

デモ:

    <p v-for="item in temps" :key="item.id">
     <p class="contract-item">
       <img :src="item.imgUrl">
     </p>
    </p>
ログイン後にコピー
写真を紹介します、パスに注意してください:

import con1 from "@/assets/img/con01.png";
import con2 from "@/assets/img/con02.png";
import con3 from "@/assets/img/con03.png";
ログイン後にコピー
画像の読み込み場所:

 temps: [
    {
     imgUrl: con1
    },
    {
     imgUrl: con2
    },
    {
     imgUrl: con3
    },
   ],
ログイン後にコピー
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

vuex のプロジェクト構造と構成の概要


webpack4 にアップグレードした後の vue-cli 3.0.x の新機能とは何ですか

以上がvue2.0 は、すべての画像をロードするメソッドをループします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Illustrator でのプラグインの読み込みエラー [修正] Illustrator でのプラグインの読み込みエラー [修正] Feb 19, 2024 pm 12:00 PM

Adobe Illustrator を起動すると、プラグインの読み込みエラーに関するメッセージが表示されますか?一部の Illustrator ユーザーは、アプリケーションを開いたときにこのエラーに遭遇しました。メッセージの後には、問題のあるプラグインのリストが続きます。このエラー メッセージは、インストールされているプラ​​グインに問題があることを示していますが、Visual C++ DLL ファイルの破損や環境設定ファイルの破損など、他の理由によって発生する可能性もあります。このエラーが発生した場合は、この記事で問題を解決する方法を説明しますので、以下を読み続けてください。 Illustrator でのプラグインの読み込みエラー Adob​​e Illustrator を起動しようとしたときに「プラグインの読み込みエラー」エラー メッセージが表示された場合は、次の操作を行うことができます。 管理者として

Stremio の字幕が機能しない; 字幕の読み込みエラー Stremio の字幕が機能しない; 字幕の読み込みエラー Feb 24, 2024 am 09:50 AM

Windows PC の Stremio で字幕が機能しませんか?一部の Stremio ユーザーは、ビデオに字幕が表示されないと報告しました。多くのユーザーが、「字幕の読み込みエラー」というエラー メッセージが表示されたと報告しています。このエラーとともに表示される完全なエラー メッセージは次のとおりです: 字幕の読み込み中にエラーが発生しました 字幕の読み込みに失敗しました: これは、使用しているプラ​​グインまたはネットワークに問題がある可能性があります。エラー メッセージにあるように、インターネット接続がエラーの原因である可能性があります。したがって、ネットワーク接続を確認し、インターネットが適切に機能していることを確認してください。これとは別に、このエラーの背後には、競合する字幕アドオン、特定のビデオ コンテンツでサポートされていない字幕、古い Stremio アプリなど、他の理由が考えられます。のように

ハイパーリンクを挿入すると Outlook がフリーズする ハイパーリンクを挿入すると Outlook がフリーズする Feb 19, 2024 pm 03:00 PM

Outlook にハイパーリンクを挿入するときにフリーズの問題が発生した場合は、不安定なネットワーク接続、古い Outlook バージョン、ウイルス対策ソフトウェアによる干渉、またはアドインの競合が原因である可能性があります。これらの要因により、Outlook がハイパーリンク操作を適切に処理できない可能性があります。ハイパーリンクの挿入時に Outlook がフリーズする問題を修正する 次の修正プログラムを使用して、ハイパーリンクの挿入時に Outlook がフリーズする問題を修正します。 インストールされているアドインを確認する Outlook を更新する ウイルス対策ソフトウェアを一時的に無効にして、新しいユーザー プロファイルの作成を試行する Office アプリ プログラムを修正する Office をアンインストールして再インストールする 始めましょう。 1] インストールされているアドインを確認する Outlook にインストールされているアドインが問題の原因となっている可能性があります。

PHP は無限スクロール読み込みを実装します PHP は無限スクロール読み込みを実装します Jun 22, 2023 am 08:30 AM

インターネットの発展に伴い、スクロール読み込みをサポートする必要がある Web ページが増えています。無限スクロール読み込みもその 1 つです。これにより、ページに新しいコンテンツを継続的に読み込むことができるため、ユーザーはよりスムーズに Web を閲覧できるようになります。この記事では、PHPを使って無限スクロールローディングを実装する方法を紹介します。 1. 無限スクロールローディングとは何ですか?無限スクロール読み込みは、スクロール バーに基づいて Web コンテンツを読み込む方法です。その原理は、ユーザーがページの一番下までスクロールすると、AJAX を通じてバックグラウンド データが非同期的に取得され、新しいコンテンツが継続的に読み込まれることです。このような積み込み方法

CSSが読み込めない問題の解決方法 CSSが読み込めない問題の解決方法 Oct 20, 2023 am 11:29 AM

CSS を読み込めない問題の解決策には、ファイル パスの確認、ファイルの内容の確認、ブラウザのキャッシュのクリア、サーバー設定の確認、開発者ツールの使用、ネットワーク接続の確認などが含まれます。詳細な紹介: 1. ファイル パスを確認します。まず、CSS ファイルのパスが正しいことを確認してください。CSS ファイルが Web サイトの別の部分またはサブディレクトリにある場合は、正しいパスを指定する必要があります。 CSS ファイルはルート ディレクトリにあり、パスは直接である必要があります。 ; 2. ファイルの内容を確認します。パスが正しい場合は、CSS ファイル自体に問題がある可能性があります。CSS ファイルを開いて確認してください。

Windows 7 が USB ドライバーのロードに失敗した場合はどうすればよいですか? Windows 7 が USB ドライバーのロードに失敗した場合はどうすればよいですか? Jul 11, 2023 am 08:13 AM

win7システムをインストールする際、一部のネチズンはUSBドライバーのロードに失敗し、USBデバイスが新しいwin7システムで認識されず、一般的なUSBフラッシュドライブ、マウスなどのデバイスが使用できない状況に遭遇しました。では、win7 のインストールで USB ドライバーのロードに失敗した場合はどうすればよいでしょうか? win7のインストール時にUSBドライバーのロードに失敗する問題を解決する方法をXiaobiに教えてもらいましょう。方法 1: 1. まず、コンピュータの電源を入れてコンピュータ システムに入り、コンピュータ システムのコンピュータ システムのバージョンを確認します。コンピューターシステムのバージョンとデバイスドライバーのバージョンが一致しているか確認してください。 2. ドライバーのバージョンを確認した後、USB デバイスをコンピューター システムに接続します。コンピューター システムは、デバイスがシステムに接続できないことを示しています。 3. 接続情報ページで、[ヘルプ] ボタンをクリックしてヘルプ情報を表示します。 4. コンピュータ部門の場合

JavaScript を使用して、ページの一番下までスクロールしたときに自動的に読み込まれる無限スクロール効果を実現するにはどうすればよいですか? JavaScript を使用して、ページの一番下までスクロールしたときに自動的に読み込まれる無限スクロール効果を実現するにはどうすればよいですか? Oct 27, 2023 pm 06:30 PM

JavaScript は、ページの一番下までスクロールすると自動的に読み込まれる無限スクロール効果をどのように実現しているのでしょうか?無限スクロール効果は、現代の Web 開発における一般的な機能の 1 つであり、ページの一番下までスクロールすると、より多くのコンテンツが自動的に読み込まれるため、ユーザーはボタンやリンクを手動でクリックすることなく、より多くのデータやリソースを取得できます。この記事では、JavaScript を使用してこの機能を実現する方法を検討し、具体的なコード例を示します。ページの一番下までスクロールすると自動的に読み込まれる無限スクロール効果を実現するには、主に以下に分かれます

JavaScript を使用して、Web ページの下部までスクロールするときにさらにコンテンツを自動的に読み込むにはどうすればよいですか? JavaScript を使用して、Web ページの下部までスクロールするときにさらにコンテンツを自動的に読み込むにはどうすればよいですか? Oct 18, 2023 am 11:40 AM

JavaScript は、Web ページの下部までスクロールしたときにさらにコンテンツを自動的に読み込む機能をどのように実装しているのでしょうか?概要: 無限スクロールは、現代のインターネット アプリケーションでは一般的な機能です。ユーザーが Web ページの一番下までスクロールすると、より多くのコンテンツが自動的に読み込まれ、ユーザー エクスペリエンスが向上します。 JavaScript は、この機能を実現するのに役立ちます。この記事では、JavaScript を使用してユーザーのスクロール イベントをリッスンし、スクロール位置に基づいてさらにコンテンツを読み込む方法の具体的なコード例を紹介します。具体的な実装: まず、HTM で

See all articles