老师请问代码符合要求吗？请问如果想用<slot></>配合v-for的方式将上方三个<span>显示出来，在对应的点击事件响应上应该如何处理
来源：4-16 自由编程
听说吃黄瓜减肥
2021-03-07 10:05:15
<!DOCTYPE html>
<html lang="en">
<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>
*{
text-align: center;
margin: 0px;
padding: 0px;
}
span{
width: 120px;
height: 30px;
line-height: 30px;
display: inline-block;
text-align: center;
cursor: pointer;
margin: 20px 0px;
}
</style>
</head>
<body>
<div id="app">
<div>
<span
v-for = "(item,index) of list"
@click = "handleSpanClick(index)"
:item = "item"
:index = "index"
:style = "{'background' : idx == index ? '#ebeaea' : 'white'}"
>{{item}}</span>
</div>
<component :is = "type"></component>
</div>
<script>
Vue.prototype.bus = new Vue()
Vue.component('child1',{
template:'<div>前端工程师</div>'
})
Vue.component('child2',{
template:'<div>Java工程师</div>'
})
Vue.component('child3',{
template:'<div>软件测试工程师</div>'
})
var vm = new Vue({
el: "#app",
props:['item','index'],
data:{
type:'child1',
list:['前端工程师','Java工程师','软件测试工程师'],
idx:'0'
},
methods:{
handleSpanClick:function(index){
_this = this;
if(index == 0){
_this.type = 'child1';
_this.idx = '0';
}else if (index == 1){
_this.type = 'child2';
_this.idx = '1';
}else if (index == 2){
_this.type = 'child3';
_this.idx = '2';
}
}
}
})
</script>
</body>
</html>
1回答
-
同学你好，首先代码和效果实现的是正确的，其次，目前基础知识阶段不适合使用插槽实现tab切换，建议学习到项目环节在重新考虑使用插槽重构这个练习题。
祝学习愉快！
0
相似问题