欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)選項卡tab切換制作

 更新時間：2022年03月04日 11:09:07   作者：光頭和尚111  
這篇文章主要為大家詳細介紹了Vue實現(xiàn)選項卡tab切換制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)選項卡tab切換制作代碼，供大家參考，具體內(nèi)容如下

1.主要的實現(xiàn)功能如下:(點擊進行切換,這里我不做太多的樣式處理了,主要看功能)

2.話不多說:主要看代碼實現(xiàn)

<!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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論