Vue实现简单选项卡效果
更新时间：2022年03月02日 12:42:15 作者：没馅儿小笼包
这篇文章主要为大家详细介绍了Vue实现简单选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现简单选项卡效果的具体代码，供大家参考，具体内容如下
效果图
1.头部选项卡
点击切换下标ID 传递一个参数回去，active绑定选中样式
<div id="app">
<ul>
<li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
<h1> {{item.title}}</h1>
</li>
</ul>
</div>2.完整HTML
默认使用V-show来切换，获取盒子下标，没有dom操作
当然，Vue官方文档也不推荐V-if和V-for同时使用
<div id="app">
<ul>
<li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
<h1> {{item.title}}</h1>
</li>
</ul>
<div class="mycontent" v-for='(item,index) in list' v-show="index === TabId">
<h1>{{item.content}}</h1>
</div>
</div>3.Vue
下标默认为0
<script>
//清除默认提示样式
Vue.config.devtools = false
Vue.config.productionTip = false
let vm = new Vue({
el: '#app',
data() {
return {
//下标ID 默认从零开始
TabId: 0,
list: [
{
title: 'Itachi',
content: 'VUE'
},
{
title: 'Sasuke',
content: 'HTML'
},
{
title: 'Obito',
content: 'CSS'
},
{
title: 'Madara',
content: 'JavaScript'
},
]
}
},
methods: {
//将点击事件获取的下标ID传递给要切换的盒子
check(index) {
this.TabId = index;
},
}
});
</script>4.完整代码
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#app ul {
width: 800px;
background: black;
opacity: .9;
margin: 100px auto;
display: flex;
justify-content: space-between;
}
#app li {
width: 300px;
text-align: center;
cursor: pointer;
color: #fff;
}
#app li:hover {
cursor: pointer;
}
#app li.active {
background: #03a9f4;
}
.mycontent {
width: 800px;
height: 500px;
margin: 0 auto;
background: #03a9f4;
opacity: .8;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div id="app">
<ul>
<li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
<h1> {{item.title}}</h1>
</li>
</ul>
<div class="mycontent" v-for='(item,index) in list' v-show="index === TabId">
<h1>{{item.content}}</h1>
</div>
</div>
<script>
//清除默认提示样式
Vue.config.devtools = false
Vue.config.productionTip = false
let vm = new Vue({
el: '#app',
data() {
return {
//下标ID 默认从零开始
TabId: 0,
list: [
{
title: 'Itachi',
content: 'VUE'
},
{
title: 'Sasuke',
content: 'HTML'
},
{
title: 'Obito',
content: 'CSS'
},
{
title: 'Madara',
content: 'JavaScript'
},
]
}
},
methods: {
//将点击事件获取的下标ID传递给要切换的盒子
check(index) {
this.TabId = index;
},
}
});
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
当使用Three.js加载GLB模型时,遇到加载错误常常是路径问题,解决方案：1. 将GLB模型文件置于public目录,避免打包时路径编码变化；2. 从node_modules的three库中复制draco解码器至public目录；3. 确认场景、摄像机和光源设置正确2024-10-10
这篇文章主要为大家详细介绍了vue实现移动端input上传视频、音频，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要给大家介绍了关于Vue中ref和$refs使用方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了Vue项目配置在局域网下访问方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要给大家介绍了关于vue路由教程之静态路由的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
使用Vue.observable()进行状态管理的实例代码详解
这篇文章主要介绍了使用Vue.observable()进行状态管理的实例代码，本文通过代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
今天小编就为大家分享一篇vue组件开发之用户无限添加自定义填写表单的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue 之 css module的使用方法，css module目的为所有类名重新生成类名，有效避开了css权重和类名重复的问题，非常具有实用价值，需要的朋友可以参考下2018-12-12
这篇文章主要介绍了Vue.js directive自定义指令详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了vue2 利用echarts 单独绘制省份,首先引入所需要的第三方模块，通过示例代码给大家介绍的非常详细，文章末尾给大家补充介绍了vue2.x结合echarts2实现显示具体省份热力图的问题，需要的朋友可以参考下2022-01-01
最新评论