Vue实现选项卡tab切换制作
更新时间：2022年03月04日 11:09:07 作者：光头和尚111
这篇文章主要为大家详细介绍了Vue实现选项卡tab切换制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现选项卡tab切换制作代码，供大家参考，具体内容如下
1.主要的实现功能如下:(点击进行切换,这里我不做太多的样式处理了,主要看功能)
2.话不多说:主要看代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡制作</title>
<!--js文件记得用自己的-->
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="xuanxiang" style="text-align: center;margin: 0 auto;width: 500px;">
<div>
<ul style="list-style-type: none" >
<li style="float: left;
width: 130px;
display: block;
margin-top: 40px;
margin-right: 10px;
margin-bottom: 0px;
background-color: aquamarine;
line-height: 30px;
border-radius: 15px 15px 0 0;
color: blueviolet;
:hover{background-color: blueviolet;
color: aliceblue;}"
v-for="(item,index) in arr" @click="changes(index)">{{ item.xuan }}</li>
</ul>
</div>
<div style="text-align: center;margin: 0 auto;float: left;margin-top: 80px;background-color: antiquewhite;width: 500px;text-align: center;height: 100px;
margin-top: 0px;
vertical-align: middle;display: table-cell;">
<p>{{ valuessss }}</p>
</div>
</div>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
这篇文章主要介绍了Vue组件模板形式实现对象数组数据循环为树形结构,本文用vue实现方式，非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-07-07
vue/Element UI实现Element UI el-dialog自由拖动功能实现
最近工作上需要在el-dialog基础上进行些功能的改动,下面这篇文章主要给大家介绍了关于vue/Element UI实现Element UI el-dialog自由拖动功能实现的相关资料,需要的朋友可以参考下2023-06-06
如何使用electron将vue项目打包成.exe文件(保姆级教程)
本文给大家介绍如何使用electron将vue项目打包成.exe文件,大家要注意一下vue2项目,使用的vue-element-admin框架,用electron打包成.exe文件,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了Vue实现圆环进度条的示例，帮助大家更好的理解和使用前端框架进行开发，感兴趣的朋友可以了解下2021-02-02
这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-09-09
vue elementui 实现搜索栏公共组件封装的实例代码
这篇文章主要介绍了vue elementui 搜索栏公共组件封装,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
Vue项目报错:Uncaught SyntaxError: Unexpected token '＜&a
最近在做vue项目时,需要引入一个第三方的js文件,在index.html中通过以下方式引入JS文件编译后就报了这个问题,这篇文章主要给大家介绍了关于Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了Vue实现时间轴功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章介绍了vue中过滤器的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了element-ui 弹窗组件封装的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
最新评论