显示图如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue测试</title>
<style>
.title{
width: 1000px;
height: 500px;
margin: 10px;
}
.content{
width: 100px;
height: 100px;
background-color: #00abff;
margin: 10px;
float: left;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="title">
<div class="content" v-for="item in dataList" :style="{background: item.color}">
{{ item.color }}
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
new Vue({
el: ".title",
data:{
dataList: [
{
id: 1,
color: "blue"
},
{
id: 2,
color: "red"
},
{
id: 3,
color: "purple"
},
]
}
})
</script>
</body>
</html>
6434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
