本文实例为大家分享了Vue实现选项卡tab切换制作代码，供大家参考，具体内容如下 1.主要的实现功能如下:(点击进行切换,这里我不做太多的样式处理了,主要看功能) 2.话不多说:主
本文实例为大家分享了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>--结束END--
本文标题: Vue实现选项卡tab切换制作
本文链接: https://www.lsjlt.com/news/141296.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0