Vue实现的简单选项卡
https://blog.csdn.net/qq_25479327/article/details/80073192
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{ width: 500px; height: 350px;
} .title{ height:50px;
} .title span{ width: 100px; height: 50px; background-color:#666; display: inline-block; line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
text-align:center;
} .content .list{ width: 500px; height: 300px; background-color: deepskyblue; display: none;
} .content .active{ display: block;
}
.title .current{ background-color: deepskyblue;
} </style>
<script src="js/vue.js"></script></head><body>
<div id="card">
<div class="title">
<span @click="num=0" :class="change(0)">国内新闻</span>
<span @click="num=1" :class="change(1)">国际新闻</span>
<span @click="num=2" :class="change(2)">银河新闻</span>
</div>
<div class="content">
<div class="list" :class="change(0, 'active')">国内新闻列表</div>
<div class="list" :class="change(1, 'active')">国际新闻列表</div>
<div class="list" :class="change(2, 'active')">银河新闻列表</div>
</div>
</div>
<script脚本代码>
var card = new Vue({
el:"#card",
data:{
num: 0,
},
methods: {
change(data, style="current") {
if (this.num == data) {
return style
}
}
}
}); </script脚本代码>
</body></html>
THE END
二维码