请检查老师
来源：4-16 自由编程
lcyjerry
2020-05-19 20:48:09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<style>
#app{
width:500px;
display: flex;
margin:0 auto;
}
.item{
width:150px;
height:50px;
margin-right:20px;
text-align: center;
border:1px solid grey;
display: flex;
align-items: center;
justify-content: center;
}
.active{
background-color: grey;
}
</style>
</head>
<body>
<div id="app">
<div v-for="(item, index) in list" :key="index" :class="[{active:isActive(index)},'item']" @click="change(index)">{{item}}</div>
<component :is="type"></component>
</div>
<script>
var content1 = {
template:`<div>前端工程师</div>`
}
var content2 = {
template:`<div>java工程师</div>`
}
var content3 = {
template:`<div>软件测试工程师</div>`
}
var vm = new Vue({
el:'#app',
data:{
list:['前端工程师','java工程师','软件测试工程师'],
idx:0,
type:'content1'
},
components:{
content1,
content2,
content3,
},
methods:{
change:function(index){
this.idx = index;
this.type = 'content'+(index+1);
},
isActive:function(index){
if(this.idx === index) return true;
}
}
})
</script>
</body>
</html>
还有更好的实现方法吗
2回答
-
好帮手慕糖
2020-05-20
同学你好，之前也说了哦，目前的方法已经很好了，不过其他写法可以参考如下：
祝学习愉快~
0 -
好帮手慕糖
2020-05-20
同学你好，目前这种方式已经很好了，不过样式上还需要完善下，显示的部分应该在下面。建议：可以分上下两个部分，三个有事件的按钮存放到一个盒子中。下面显示区域单独存放一个盒子。
祝学习愉快~
0h020-05-20
相似问题