<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue-for循环输出图片-数组</title>
		<style type="text/css">
			.a1{
				margin: 5px auto;
				text-align: center;
			}
		</style>
	</head>

	<body>

		<div id="app">
			<h2>{{msg}}</h2>
			<div class="a1" v-for="a in msg2">
				<img :src="a" />
			</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: '你好hello',
					msg2: [
						"http://wwtliu.com/sxtstu/blueberrypai/images/markCup_03.png",
						"http://wwtliu.com/sxtstu/blueberrypai/images/markCup_06.png",
						"http://wwtliu.com/sxtstu/blueberrypai/images/markCup08.png",
						"http://wwtliu.com/sxtstu/blueberrypai/images/markCup09.png"
					]
				},
				methods: {

				}
			});
		</script>
	</body>

</html>复制代码


Logo

前往低代码交流专区

更多推荐