<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{
500px;
height: 350px;
}
.title{
height:50px;
}
.title span{
100px;
height: 50px;
background-color:#666;
display: inline-block;
line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
text-align:center;
}
.content .list{
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>