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 electron应用调exe程序的实现步骤,用Python写了一个本地服务编译成exe程序,在electron程序启动后,自动执行exe程序,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vuex5中的Pinia插件机制，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
本文主要介绍了vue3+pinia用户信息持久缓存token的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07
在 Vue.js 中,组件是构建应用程序的基本单位,然而,当你的应用程序变得复杂时,组件之间的通信变得至关重要,本文将介绍几种 Vue 组件之间通信的方式,帮助你更好地管理和组织代码,感兴趣的朋友一起看看吧2024-06-06
这篇文章主要介绍了vue 设置proxyTable参数进行代理跨域的相关资料，及代理跨域的概念原理,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue如何实现未登录不能访问某些页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章分享一个比较有意思的东西，那就是Vue中如何实现cache缓存的，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-07-07
这篇文章主要给大家介绍了关于vue项目运行的相关资料,文中通过图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-model、v-on、等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼2023-04-04
这篇文章主要介绍了vue3如何在setup中获取DOM元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论