<style>
*{
margin:0px;
padding:0px;
}
#app{
width: 600px;
height: 1000px;
text-align: center;
margin: 0 auto;
padding:100px;
}
#app ul{
width: 20%;
float: left;
overflow: auto;
background-color: aqua;
}
#app li{
line-height: 30px;
}
#app main{
float: right;
overflow: auto;
width: 80%;
background-color: pink;
}
</style>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" @click="change(item.id)">{{item.con}}</li>
</ul>
<main>
<v-aside :n="message"></v-aside>
</main>
</div>
<template id="aside">
<main>
<h1>{{n.msg}}</h1>
<button>{{n.con}}</button>
<p v-if="n.hot">热销榜</p>
<p v-if="n.sale" v-for="(item,index) in n.sale">{{item}}</p>
</main>
</template>
<script src="js/vue.js"></script>
<script>
var aside={
template:'#aside',
data(){
return{
}
},
props:['n']
}
new Vue({
el:'#app',
data:{
message:'',
list:[{
con:'精选推荐',
id:'xxx'
},{
con:'男装',
id:'man'
},{
con:'男鞋',
id:'nanxie'
},{
con:'女装',
id:'nvzhuang'
},{
con:'女鞋',
id:'nvxie'
},{
con:'男衬衫',
id:'mancs'
},{
con:'女裤',
id:'nvk'
}]
},
components:{
'v-aside':aside
},
methods:{
change(a){
// 一般此处进行ajax的请求
if(a=='xxx'){
this.message={
con:'精选推荐',
msg:'这是精选推荐的内容',
hot:'3',
sale:[1,2,3,4]
}
}else if(a=='man'){
this.message={
con:'男装',
msg:'这是男装的内容',
sale:[1+"man",2+"man",3+"man"]
}
}else if(a=='nanxie'){
this.message={
con:'男鞋',
msg:'这是男鞋的内容'
}
}
else if(a=='nvzhuang'){
this.message={
con:'女装',
msg:'这是女装的内容'
}
}
else if(a=='nvxie'){
this.message={
con:'女鞋',
msg:'这是女装的内容'
}
}
else if(a=='mancs'){
this.message={
con:'男衬衫',
msg:'这是男衬衫的内容'
}
}
else if(a=='nvk'){
this.message={
con:'女裤',
msg:'这是女裤的内容'
}
}
}
}
})
</script>
</body>
扫一扫
5846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
