masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 在vue2.0中循环遍历并且加载不同图片（详细教程）

在vue2.0中循环遍历并且加载不同图片（详细教程）

亚连
Lepaskan： 2018-06-01 10:35:14
asal
3124 orang telah melayarinya

下面我就为大家分享一篇vue2.0 循环遍历加载不同图片的方法，具有很好的参考价值，希望对大家有所帮助。

demo：

    <p v-for="item in temps" :key="item.id">
     <p class="contract-item">
       <img :src="item.imgUrl">
     </p>
    </p>
Salin selepas log masuk

引入图片，注意路径：

import con1 from "@/assets/img/con01.png";
import con2 from "@/assets/img/con02.png";
import con3 from "@/assets/img/con03.png";
Salin selepas log masuk

进行图片的加载位置：

 temps: [
    {
     imgUrl: con1
    },
    {
     imgUrl: con2
    },
    {
     imgUrl: con3
    },
   ],
Salin selepas log masuk

这样就实现了循环遍历的时候加载不同的图片。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue.js中底部导航栏，如何做到一级路由显示 子路由不显示的解决方法？

如何通过JavaScript实现微信号随机切换代码（详细教程）

根据AngularJS重新加载当前路由页面，有哪些方法？

Atas ialah kandungan terperinci 在vue2.0中循环遍历并且加载不同图片（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
memuatkan
sumber：php.cn
Artikel sebelumnya：怎样使用vue实现2048小游戏 Artikel seterusnya：vue中父子组件传值及slot使用剖析
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2313
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2448
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2064
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1949
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
2015
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan