老师检查一下
来源：4-16 自由编程
慕前端2185815
2021-03-28 19:53:20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.center-wrap{
width:600px;
margin:100px auto;
text-align:center;
}
.item-wrap{
border:1px solid #f2f2f2;
overflow:hidden;
}
.item-wrap span{
float:left;
width:33.3%;
font-size:12px;
padding:10px 0 ;
}
.item-wrap span.active{
background-color:#ddd;
}
.result{
font-size:12px;
padding:5px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="root">
<!-- 用一个DIV包裹所有的内容 -->
<div class="center-wrap">
<div class="item-wrap">
<span :class="curIndex==index?'active':''" v-for="(item,index) in list" @click="handleClick(index)">{{item}}</span>
</div>
<div class="result">
<component :is="showClass" ></component>
</div>
</div>
</div>
<script>
Vue.component('job0',{
template:"<div>前端工程师</div>"
})
Vue.component('job1',{
template:"<div>JAVA工程师</div>"
})
Vue.component('job2',{
template:"<div>软件测试工程师</div>"
})
var vm = new Vue({
el:"#root",
data:{
list:['前端工程师','JAVA工程师','软件测试工程师'],
curIndex:0,
shows:['job0','job1','job2'],
showClass:'job0'
},
methods:{
handleClick:function(index){
this.curIndex = index;
this.showClass = this.shows[index];
}
}
})
</script>
</body>
</html>
1回答
-
好帮手慕久久
2021-03-29
同学你好，代码正确，很棒，祝学习愉快！
0
相似问题