h2> Zhang. . .
</ H2> ' })
new new Vue ({
el: "#app",
data: {
},
components:{
'my-address': {
template:'<h2>张。。。</h2>'
},
'my-address2': {
template:"#myAddress2",
data:function(){
return {
title: "title",
list:[1,2,3,4]
}
}
},
'my-tab': {
template :"#myAddress3",
data:function(){
return {
tabtitil: [ 'title a', 'Title II', 'Title 3',],
tabContent: [ 'A', 'B', 'C'],
CUR2:. 1,
}
}
}
}
})
}
< / Script>
<style>
UL, Li {
padding: 0; margin: 0
}
.tab Li-TIT {
padding: 10px 15px;
text-align = left: Center;
List-style: none;
Cursor: pointer;
the display: inline-Block;
}
.tab-con li {
padding: 10px 15px;
text-align: center;
list-style: none;
cursor: pointer;
display: inline-block;
}
</style>
<template id="myaddress2">
<div>
<p>{{title}}</p>
<ul>
<li v-for="(v,i) in list">{{v}}</li>
</ul>
</div>
</template>
<template id="myAddress3">
<div>
<ul class="tab-tit">
<li v-for="(v,i) in tabtitil" @click="cur2=i" >{{v}}</li>
</ul>
<ul class="tab-con">
<li v-for="(v,i) in tabContent" v-show="cur2===i">{{v}}</li>
</ul>
</div>
</template>
</head>
<body>
<div id="app">
<hello></hello>
<my-component> </my-component>
<my-address></my-address>
<my-address2></my-address2>
<my-tab></my-tab>
</div>
</body>
</html>