vue-for循环输出图片-对象

Vue循环输出图片示例

最新推荐文章于 2024-03-13 11:16:51 发布

转载最新推荐文章于 2024-03-13 11:16:51 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5afaa97d6fb9a07a991900ce

文章标签：

#javascript #ViewUI

本文展示了一个使用Vue.js框架循环输出多个图片的实例。通过v-for指令遍历一个包含图片URL的对象数组，并利用v-bind绑定图片源。该示例包括完整的HTML结构和内联的Vue实例代码。

...

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue循环输出图片-对象</title>
	</head>

	<body>

		<div id="app">
			<h1>{{msg}}</h1>
			<div v-for="index in msg2">
				<img v-bind:src="index.src"/>
			</div>
		</div>

		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: 'vue循环输出图片',
					msg2: [{
							src: "http://wwtliu.com/sxtstu/blueberrypai/images/markCup_03.png"
						},
						{
							src: "http://wwtliu.com/sxtstu/blueberrypai/images/markCup_06.png"
						},
						{
							src: "http://wwtliu.com/sxtstu/blueberrypai/images/markCup08.png"
						},
						{
							src: "http://wwtliu.com/sxtstu/blueberrypai/images/markCup09.png"
						}
					]
				},
				methods: {

				}

			});
		</script>
	</body>

</html>复制代码