Last active
May 28, 2019 23:51
-
-
Save zsnmwy/0a767e1c4617f3c3913e4ff3cd5eaeef to your computer and use it in GitHub Desktop.
vue循环输出图片-对象
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Document</title> | |
</head> | |
<body> | |
<div id="app"> | |
<h1>{{ msg }}</h1> | |
<div v-for="index in msg2"> | |
<a href="http://baidu.com"> | |
<img v-bind:src="index.src"> | |
<span>{{index.msg3}}</span> | |
</a> | |
</div> | |
</div> | |
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> | |
<script> | |
var vm = new Vue({ | |
el: "#app", | |
data: { | |
msg: 'vue循环输出图片', | |
msg2: [{ | |
src: "https://vue.docschina.org/images/logo.png", | |
msg3: "logo" | |
}, | |
{ | |
src: "https://vue.docschina.org/images/tooltwist.png", | |
msg3: "logo2" | |
}, | |
{ | |
src: "https://vue.docschina.org/images/valuecoders.png", | |
msg3: "logo3" | |
}, | |
{ | |
src: "https://vue.docschina.org/images/nsoft.png", | |
msg3: "logo4" | |
} | |
] | |
}, | |
methods: { | |
} | |
}); | |
</script> | |
<style> | |
a{ | |
display: block; | |
width: 400px; | |
height: 400px; | |
background-color: red; | |
margin: 10px auto; | |
} | |
h1{ | |
text-align: center; | |
} | |
</style> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment