vue娓叉煋鑷畾涔塲son鏁版嵁

Posted 2021-01-08

鏍囩锛?a href='http://www.mamicode.com/so/1/center' title='center'>center   缇庨   idt   ott   def   dex   tom   鎴夸环   static   

<template>
<div class="wrap">
<div class="main">
<div class="main_left">
<ul v-for="(val,index) in list[0].type" @click="clc(index)">
<li>{{val.tit}}</li>
</ul>
</div>
<div class="main_right">
<ul v-for="(val,index) in list[0].type[this.indexs].datainfo">
<li>
<img :src="val.img" />
<span>{{val.name}}</span>
</li>
</ul>
</div>
</div>
</div>
</template>

<script>
import axios from "axios"
export default {
name: "tab1",
data() {
return {
indexs: "0",
list: [{
"type": [{
"tit": "甯哥敤",
"datainfo": [{
"img": "../../static/img/缇庨.png",
"name": "缇庨",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/鏄熷反鍏?png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/鍏氦.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/鍖婚櫌.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/閾惰.png",
"name": "鍏氦鍦伴搧",
"datatype": ""
},
{
"img": "../../static/img/鐢靛奖闄?png",
"name": "鍥㈣喘",
"datatype": ""
},
{
"img": "../../static/img/瓒呭競.png",
"name": "瓒呭競",
"datatype": ""
},
{
"img": "../../static/img/鍔犳补绔?png",
"name": "鍔犳补绔?,
"datatype": "鎶樻墸娌逛环"
},
{
"img": "../../static/img/鏄熷反鍏?png",
"name": "鐢靛奖闄?,
"datatype": "褰辫-棰勫畾"
},
{
"img": "../../static/img/鏄熷反鍏?(1).png",
"name": "鏄熷反鍏?,
"datatype": ""
},
{
"img": "../../static/img/姹夊牎鍙箰.png",
"name": "楹﹁偗姣?,
"datatype": ""
},
{
"img": "../../static/img/ktv (1).png",
"name": "KTV",
"datatype": ""
},
{
"img": "../../static/img/鍟ら厭.png",
"name": "閰掑惂",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "娲楁荡",
"datatype": ""
},
{
"img": "../../static/img/鍟嗗満.png",
"name": "鍟嗗満",
"datatype": ""
},
{
"img": "../../static/img/鍖婚櫌 (2).png",
"name": "鍖婚櫌",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/鍗敓闂?.png",
"name": "鍏帟",
"datatype": ""
}
]
},
{
"tit": "鐗硅壊",
"datainfo": [{
"img": "../../static/img/閰掑簵.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/缇庨.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/閾惰.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/鍏氦 (1).png",
"name": "鍏氦鍦伴搧",
"datatype": ""
},
{
"img": "../../static/img/鍥㈣喘.png",
"name": "鍥㈣喘",
"datatype": ""
},
{
"img": "../../static/img/瓒呭競 (1).png",
"name": "瓒呭競",
"datatype": ""
},
{
"img": "../../static/img/鍔犳补绔?(1).png",
"name": "鍔犳补绔?,
"datatype": "鎶樻墸娌逛环"
},
{
"img": "../../static/img/鐢靛奖闄?(1).png",
"name": "鐢靛奖闄?,
"datatype": "褰辫-棰勫畾"
},
{
"img": "../../static/img/鏄熷反鍏?(1).png",
"name": "鏄熷反鍏?,
"datatype": ""
},
{
"img": "../../static/img/姹夊牎鍙箰.png",
"name": "楹﹁偗姣?,
"datatype": ""
},
{
"img": "../../static/img/ktv (1).png",
"name": "KTV",
"datatype": ""
}
]
},
{
"tit": "椁愰ギ",
"datainfo": [{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/閾惰.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/鍏氦 (1).png",
"name": "鍏氦鍦伴搧",
"datatype": ""
},
{
"img": "../../static/img/鍥㈣喘.png",
"name": "鍥㈣喘",
"datatype": ""
},
{
"img": "../../static/img/瓒呭競 (1).png",
"name": "瓒呭競",
"datatype": ""
}
]
},
{
"tit": "璐墿",
"datainfo": [{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/閾惰.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
}
]
},
{
"tit": "浼戦棽",
"datainfo": [{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/閾惰.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/閾惰.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/閾惰.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
}
]
},
{
"tit": "浜ら€?,
"datainfo": [{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/閾惰.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
}
]
},
{
"tit": "渚挎皯",
"datainfo": [{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/閾惰.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/閾惰.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/閾惰.png",
"name": "閾惰",
"datatype": ""
},
{
"img": "../../static/img/娲楁荡鐢ㄥ叿.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
}
]
}, {
"tit": "閰掑簵",
"datainfo": [{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
}
]
},
{
"tit": "璧勮",
"datainfo": [{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
},
{
"img": "../../static/img/缇庨.png",
"name": "鍛ㄨ竟寰崥",
"datatype": "澶т紬鐐硅瘎"
},
{
"img": "../../static/img/閰掑簵.png",
"name": "閰掑簵",
"datatype": "鎴夸环-棰勫畾"
}
]
}

]
}

]
}
},
methods: {
clc(index) {
this.indexs = index

}
}
}
</script>
<style type="text/css">
.main_left {
width: 30%;
height: 100vh;
float: left;
overflow: auto;
}

.main_left ul li {
width: 100%;
height: 1rem;
text-align: center;
line-height: 1rem;
font-size: 18px;
border-bottom: 1px solid #ccc;
}

.main_left ul li:hover {
background: #efefef;
}

.main_right {
width: 70%;
height: 100vh;
float: left;
overflow: auto;
}

.main_right ul li {
width: 100%;
height: 1rem;
line-height: 1rem;
font-size: 18px;
background: #efefef;
}

.main_right ul li img {
width: 1rem;
float: left;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->