Vue實現(xiàn)選項卡tab切換制作
更新時間：2022年03月04日 11:09:07 作者：光頭和尚111
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)選項卡tab切換制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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中更改數(shù)組中屬性,在頁面中不生效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
最近在vue項目中遇到需要用樹形控件的部分，比如導(dǎo)航目錄是不確定的，所以必須要用樹形結(jié)構(gòu)，下面腳本之家小編給大家?guī)砹藇ue用遞歸組件寫樹形控件的實例代碼，需要的朋友參考下吧2018-07-07
解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問題
這篇文章主要介紹了解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式
這篇文章主要介紹了Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
又一款MVVM組件 Vue基礎(chǔ)語法和常用指令（1）
這篇文章主要為大家分享了一款MVVM組件，詳細(xì)介紹了Vue基礎(chǔ)語法和常用指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了ant-design-vue按需加載的坑的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了如何解決ECharts圖表切換后縮成一團的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
element table跨分頁多選及回顯的實現(xiàn)示例
本文主要介紹了element table跨分頁多選及回顯的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
詳解vue2.0 使用動態(tài)組件實現(xiàn) Tab 標(biāo)簽頁切換效果（vue-cli）
本篇文章主要介紹了詳解vue2.0 使用動態(tài)組件實現(xiàn) Tab 標(biāo)簽頁切換效果（vue-cli），具有一定的參考價值，有需要的可以了解下2017-08-08
本篇文章主要介紹了基于vue2.x的電商圖片放大鏡插件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01