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

1,325 阅读1分钟

...


<!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>