一个网页里的格式是一个父组件读取js里插入的数据，但是不知道具体个数的子组件，
想通过数组用vfor循环调用，出来的结果是子组件的具体代码
如果假设就一个子组件直接调用是正常的，但是放在数组里出来的还是错的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.aaa{width: 250px;
height: 190px;
}
.bbb{width: 250px;
height: 190px;
-webkit-filter: brightness(50%);filter: brightness(50%);
}
</style>
</head>
<body style="background-image: url(组%209.png);">
<div id="a">
<com1></com1>
<div id="x" v-for="itme in arr">
{{itme}}
</div>
</div>
<script type="text/javascript">
var arr = new Array();
var com1 = {
template:`<div id=""style="width: 20;">
<div style="position: relative; width: 250px; height: 190px;white-space: nowrap;margin-left: 30px;border:9px solid #fff;border-top-left-radius: 10px;border-top-right-radius: 10px; border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">
<img src="组%209.png" :class="{aaa:y,bbb:n}" @mousedown="dj" @mouseup="dj">
<span style="position: absolute; top: 60px; left: 54px;"><h2 style="color: aliceblue;" @mousedown="dj" @mouseup="dj"><center>123</center></h2><h4 style="color: aliceblue;"><center>（点击状态）</center></h4></span>
</div>
</div>`,
data:function(){
return{
y:true,
n:false,
}
},
methods:{
dj:function(){
this.y = !this.y;
this.n = !this.n;
}
}
}//子组件
let a =new Vue({
el:"#a",
components:{
'com1':com1
},
data:{
arr:[com1]
}
})
</script>
</body>
</html>
