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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue組件模板形式實現(xiàn)對象數(shù)組數(shù)據(jù)循環(huán)為樹形結(jié)構(gòu)(實例代碼)
這篇文章主要介紹了Vue組件模板形式實現(xiàn)對象數(shù)組數(shù)據(jù)循環(huán)為樹形結(jié)構(gòu),本文用vue實現(xiàn)方式，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-07-07
vue/Element?UI實現(xiàn)Element?UI?el-dialog自由拖動功能實現(xiàn)
最近工作上需要在el-dialog基礎(chǔ)上進行些功能的改動,下面這篇文章主要給大家介紹了關(guān)于vue/Element?UI實現(xiàn)Element?UI?el-dialog自由拖動功能實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-06-06
如何使用electron將vue項目打包成.exe文件(保姆級教程)
本文給大家介紹如何使用electron將vue項目打包成.exe文件,大家要注意一下vue2項目,使用的vue-element-admin框架,用electron打包成.exe文件,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了Vue實現(xiàn)圓環(huán)進度條的示例，幫助大家更好的理解和使用前端框架進行開發(fā)，感興趣的朋友可以了解下2021-02-02
這篇文章主要給大家介紹了關(guān)于vue3封裝放大鏡組件的相關(guān)資料,封裝之后,使用起來就更簡單了,一個組件一行就可以,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09
vue elementui 實現(xiàn)搜索欄公共組件封裝的實例代碼
這篇文章主要介紹了vue elementui 搜索欄公共組件封裝,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
Vue項目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜&a
最近在做vue項目時,需要引入一個第三方的js文件,在index.html中通過以下方式引入JS文件編譯后就報了這個問題,這篇文章主要給大家介紹了關(guān)于Vue項目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜'的解決方法,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)時間軸功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章介紹了vue中過濾器的用法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了element-ui 彈窗組件封裝的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01