Vue2：用Vue框架实现 - JSON数据渲染页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>
<body>
<!-- 4.for循环实现json数据的渲染 -->
<style>
.user {
width: 500px;
height: 200px;
background-color: rgb(176, 196, 176);
padding: 10px;
margin: 10px;
border-radius: 10px;
}
.info{
color: rgb(11, 96, 96);
}
img{
width: 50px;
height: 50px;
border-radius: 50%;
}
</style>
<div class="box">
<div v-for="el in arr" :class="{user:u}">
<div class="name">
<img :src="el.touxiang" alt="">
{{el.name}}
</div>
<div v-for="el in el.info" class="info">
<div class="num">{{el}}</div>
<!-- <div v-text="el.info.signal" class="txt">{{el.text}}</div> -->
</div>
</div>
</div>
<script>
var vm = new Vue({
el: ".box",
data: {
arr: [{
touxiang: "./flower.png",
name: "name1",
age: "1",
info: {
num: 123456,
signal: "hello",
online: 0,
}
},
{
touxiang: "./flower2.png",
name: "name2",
age: "2",
info: {
num: 123456,
signal: "hello",
online: 1,
}
},
{
touxiang: "./flower2.png",
name: "name3",
age: "3",
info: {
num: 123456,
signal: "hello",
online: 0,
}
},
{
touxiang: "./flower.png",
name: "name4",
age: "4",
info: {
num: 123456,
signal: "hello",
online: 1,
}
},
{
touxiang: "./flower.png",
name: "name5",
age: "5",
info: {
num: 123456,
signal: "hello",
online: 1,
}
},
{
touxiang: "./flower2.png",
name: "name6",
age: "6",
info: {
num: 123456,
signal: "hello",
online: 0,
}
},],
u: true,
},
})
</script>
</body>
</html>
