Vue.js选项卡切换效果代码优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡切换效果</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<pre><code> 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 {
float: left;
width: 50px;
height: 26px;
line-height: 26px;
font-size: 16px;
text-align: center;
cursor: pointer;
margin: 0;
padding: 0;
}
ul.tabs li.active {
background-color: #66CCFF;
color: #FFFFFF;
}
.main {
margin-top: 10px;
}
.main div {
width: 270px;
height: 43px;
line-height: 43px;
border-bottom: 1px dashed #333333;
background-color: #FFFFFF;
font-size: 14px;
overflow: hidden;
}
.main div span {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.main div span:last-child {
float: right;
margin-right: 10px;
}
button {
background-color: #EE3333;
color: #FFFFFF;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: #FF6666;
}
</style>
</code></pre>
</head>
<body>
<div id="app">
<div class="box">
<div class="top">
<span class="title">电影排行</span>
<ul class="tabs">
<li :class="{ active: isHitmovie }" @click="changeTab('hit')">热播</li>
<li :class="{ active: isClassicmovie }" @click="changeTab('classic')">经典</li>
</ul>
</div>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
</div>
</div>
<script type="text/javascript">
//创建根实例
var vm = new Vue({
el: '#app',
data: {
currentView: 'hit',
isHitmovie: true,
isClassicmovie: false
},
methods: {
changeTab(tab) {
if (tab === 'hit') {
this.currentView = 'hit';
this.isHitmovie = true;
this.isClassicmovie = false;
} else if (tab === 'classic') {
this.currentView = 'classic';
this.isHitmovie = false;
this.isClassicmovie = true;
}
}
},
//注册局部组件
components: {
hit: {
data() {
return {
movies: [
{ name: '终结者5', star: '阿诺德.施瓦辛格' },
{ name: '飓风营救', star: '连姆.尼森' },
{ name: '我是传奇', star: '威尔.史密斯' },
{ name: '一线声机', star: '杰森.斯坦森' },
{ name: '罗马假日', star: '格里高利.派克' },
{ name: '史密斯夫妇', star: '布拉德.皮特' },
{ name: '午夜邂逅', star: '克里斯.埃文斯' }
]
}
},
methods: {
removeMovie(index) {
this.movies.splice(index, 1);
}
},
template: `
<div class="main">
<div v-for="(movie, index) in movies">
<span>{{ index + 1 }}</span>
<span>{{ movie.name }}</span>
<span>{{ movie.star }}</span>
<button @click="removeMovie(index)">删除</button>
</div>
</div>
`
},
classic: {
data() {
return {
movies: [
{ name: '机械师2：复活', star: '杰森.斯坦森' },
{ name: '变形金刚', star: '希亚.拉博夫' },
{ name: '暮光之城', star: '克里斯汀.斯图尔特' },
{ name: '怦然心动', star: '玛德琳.卡罗尔' },
{ name: '电话情缘', star: '杰西.麦特卡尔菲' },
{ name: '超凡蜘蛛侠', star: '安德鲁.加菲尔德' },
{ name: '雷神', star: '克里斯.海姆斯沃斯' }
]
}
},
methods: {
removeMovie(index) {
this.movies.splice(index, 1);
}
},
template: `
<div class="main">
<div v-for="(movie, index) in movies">
<span>{{ index + 1 }}</span>
<span>{{ movie.name }}</span>
<span>{{ movie.star }}</span>
<button @click="removeMovie(index)">删除</button>
</div>
</div>
`
}
}
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mkR8 著作权归作者所有。请勿转载和采集!