<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
<style>
*{margin:0;padding:0;}
body{padding:15px;}
a{text-decoration: none;}
ul{list-style:none;height:41px;}
li{float:left;padding:10px;}
#container div{height:300px;border:1px solid #0000ed;clear:both;}
li.active{background:rgba(12,23,42,0.5);}
li.active a{color:#fff;}
</style>
</head>
<body>
<div id="container">
<ul>
<list-li v-for="(msg,index) in msgs" :msg="msg" :key="msg.id" :class="{ active:oks['ok'+msg.id]}"></list-li>
</ul>
<list-div v-if="ok" v-for="(ok,index) in oks" :ok="ok" :index="index" :key="index"></list-div>
</div>
<script>
Vue.component('list-li',{
props:['msg','oks'],
template:'<li @click="clickli(msg.id)" :mark="msg.id" ><a href="#">{{msg.text}}</a></li>',
methods:{
clickli:function(index){
for(let ok in vm.oks){
vm.oks[ok]=false;
}
vm.oks['ok'+index]=true;
}
}
});
Vue.component('list-div',{
props:['ok','index'],
template:'<div>{{index}}-{{ok}}</div>'
});
var vm=new Vue({
el:'#container',
data:{
msgs:[
{id:1,text:'首页'},
{id:2,text:'详情页'},
{id:3,text:'产品页'},
{id:4,text:'联系我们'}
],
oks:{
ok1:true,
ok2:false,
ok3:false,
ok4:false
}
}
})
</script>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-250083.html
