<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app">
<tab :title="titleArr" :list="conlist"></tab>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("tab",{
props:["title","list"],
template:`
<div :style="clearFloat">
<div :style="objhead">
<div :style="hContent" v-for="val in title">{{val}}</div>
</div>
<ul :style="objhead">
<li :style="clearFloat" v-for="val in list">
<div :style="hContent" >{{val.name}}</div>
<div :style="hContent" >{{val.price}}</div>
<div :style="hContent" >{{val.num}}</div>
</li>
</ul>
</div>
`,
data:function(){
return{
objhead:{
width:"600px"
},
hContent:{
float:"left",
width:"33.33%",
lineHeight:"35px",
textAlign:"center",
border:"1px solid green",
background:"red"
},
clearFloat:{
overflow: "hidden"
}
}
}
})
var app = new Vue({
el: '#app',
data:{
titleArr:["商品名称","价格","数量"],
conlist:[{
name:"白菜",
price:12,
num:1
}]
}
})
</script>
</body>
</html>
网友评论