<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選項卡切換效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow: hidden;
}
body {
font-family: 微軟雅黑
}
.box {
width: 270px;
margin: 20px auto;
}
.top {
height: 26px;
line-height: 26px;
}
.title {
display: inline-block;
font-size: 22px;
}
ul.tabs {
display: inline-block;
list-style: none;
margin-left: 70px;
}
ul.tabs li {
margin: 0;
padding: 0;
float: left;
width: 50px;
height: 26px;
line-height: 26px;
font-size: 16px;
cursor: pointer;
text-align: center
}
ul.tabs li.active {
display: block;
width: 50px;
height: 26px;
line-height: 26px;
background-color: #66CCFF;
color: #FFFFFF;
cursor: pointer;
}
.main {
clear: both;
margin-top: 10px;
}
.main div {
width: 270px;
height: 43px;
line-height: 43px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #333333;
background-color: #FFFFFF;
font-size: 14px;
}
.main div span {
margin-left: 10px;
}
.main div span:last-child {
float: right;
margin-right: 10px;
}
</style>
<script src="https://bbs.csdn.net/topics/js/vue.js"></script>
</head>
<body>
<div id="box">
<div class="box">
<div class="top">
<span class="title">電影排行</span>
<ul class="tabs">
<li @mouseover="">熱播</li>
<li @mouseover="">經典</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
//創建根實體
var vm = new Vue({
el: '#box',
data: {
active: true,
current: 'hit',
hitmovie: [ //熱播電影陣列
{
name: '終結者5',
star: '阿諾德.施瓦辛格'
},
{
name: '颶風營救',
star: '連姆.尼森'
},
{
name: '我是傳奇',
star: '威爾.史密斯'
},
{
name: '一線聲機',
star: '杰森.斯坦森'
},
{
name: '羅馬假日',
star: '格里高利.派克'
},
{
name: '史密斯夫婦',
star: '布拉德.皮特'
},
{
name: '午夜邂逅',
star: '克里斯.埃文斯'
}
],
classicmovie: [ //經典電影陣列
{
name: '機械師2：復活',
star: '杰森.斯坦森'
},
{
name: '變形金剛',
star: '希亞.拉博夫'
},
{
name: '暮光之城',
star: '克里斯汀.斯圖爾特'
},
{
name: '怦然心動',
star: '瑪德琳.卡羅爾'
},
{
name: '電話情緣',
star: '杰西.麥特卡爾菲'
},
{
name: '超凡蜘蛛俠',
star: '安德魯.加菲爾德'
},
{
name: '雷神',
star: '克里斯.海姆斯沃斯'
}
]
},
methods: {
},
//注冊區域組件
});
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/216611.html
標籤：JavaScript
上一篇：這個路徑放到服務器讀取不了檔案！