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;
overflow: hidden;
}
<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 {
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>
</code></pre>
</head>
<body>
<div id="box">
<div class="box">
<div class="top">
<span class="title">电影排行</span>
<ul class="tabs">
<li :class="{active: isHitmovie}" @click="change">热播</li>
<li :class="{active: isClassicmovie}" @click="change">经典</li>
</ul>
</div>
<keep-alive>
<component :is="viewName"></component>
</keep-alive>
</div>
</div>
<script type="text/javascript">
//创建根实例
var vm = new Vue({
el: '#box',
data: {
viewName: 'hit',
isHitmovie: true,
isClassicmovie: false
},
methods: {
change() {
this.viewName = this.isHitmovie ? 'classic' : 'hit';
this.isClassicmovie = !this.isClassicmovie;
this.isHitmovie = !this.isHitmovie;
}
},
//注册局部组件
components: {
'hit': { // 添加 name 属性
data() {
return {
hitmovie: [ //热播电影数组
{
name: '终结者5',
star: '阿诺德.施瓦辛格'
}, {
name: '飓风营救',
star: '连姆.尼森'
}, {
name: '我是传奇',
star: '威尔.史密斯'
}, {
name: '一线声机',
star: '杰森.斯坦森'
}, {
name: '罗马假日',
star: '格里高利.派克'
}, {
name: '史密斯夫妇',
star: '布拉德.皮特'
}, {
name: '午夜邂逅',
star: '克里斯.埃文斯'
}
],
}
},
methods: {
del(index) {
this.hitmovie.splice(index, 1)
}
},
template: `<div class="main">
<div v-for="(item, index) in hitmovie">
<span>{{index + 1}}</span>
<span>{{item.name}}</span>
<span>{{item.star}}</span>
<button style="float: right;" @click="del(index)">删除</button>
</div>
</div>`
},
'classic': { // 添加 name 属性
data() {
return {
classicmovie: [ //经典电影数组
{
name: '机械师2：复活',
star: '杰森.斯坦森'
}, {
name: '变形金刚',
star: '希亚.拉博夫'
}, {
name: '暮光之城',
star: '克里斯汀.斯图尔特'
}, {
name: '怦然心动',
star: '玛德琳.卡罗尔'
}, {
name: '电话情缘',
star: '杰西.麦特卡尔菲'
}, {
name: '超凡蜘蛛侠',
star: '安德鲁.加菲尔德'
}, {
name: '雷神',
star: '克里斯.海姆斯沃斯'
}
]
}
},
methods: {
del(index) {
this.classicmovie.splice(index, 1)
}
},
template: `<div class="main">
<div v-for="(item, index) in classicmovie">
<span>{{index + 1}}</span>
<span>{{item.name}}</span>
<span>{{item.star}}</span>
<button style="float: right" @click="del(index)">删除</button>
</div>
</div>`
}
}
});
</script>
</body>
</html>
代码中没有明显的bug，但是有一些建议可以提供：
<ol>
<li>
<p>在使用v-bind:class时，可以简化为:class，例如:class="{active: isHitmovie}"。</p>
</li>
<li>
<p>在判断条件时，可以使用三元运算符代替if-else语句，例如this.viewName = this.isHitmovie ? 'classic' : 'hit'。</p>
</li>
<li>
<p>在使用组件时，可以为组件添加name属性，这样在调试时可以更方便地查看组件名称。例如name: 'hit'。</p>
</li>
</ol>
原文地址: https://www.cveoy.top/t/topic/mkRA 著作权归作者所有。请勿转载和采集!