Vue實(shí)現(xiàn)選項(xiàng)卡tab切換制作
更新時(shí)間：2022年03月04日 11:09:07 作者：光頭和尚111
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)選項(xiàng)卡tab切換制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)選項(xiàng)卡tab切換制作代碼，供大家參考，具體內(nèi)容如下
1.主要的實(shí)現(xiàn)功能如下:(點(diǎn)擊進(jìn)行切換,這里我不做太多的樣式處理了,主要看功能)
2.話不多說:主要看代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>選項(xiàng)卡制作</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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果完整實(shí)例
- vue實(shí)現(xiàn)tab欄切換效果
- Vue中的table表單切換實(shí)現(xiàn)效果
- vue+iview?Table表格多選切換分頁保持勾選狀態(tài)
- vue?router如何實(shí)現(xiàn)tab切換
- vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換
- vue實(shí)現(xiàn)tab切換的3種方式及切換保持?jǐn)?shù)據(jù)狀態(tài)
- vue實(shí)現(xiàn)tab路由切換組件的方法實(shí)例
- Vue實(shí)現(xiàn)tab切換的兩種方法示例詳解
相關(guān)文章
Vue組件模板形式實(shí)現(xiàn)對象數(shù)組數(shù)據(jù)循環(huán)為樹形結(jié)構(gòu)(實(shí)例代碼)
這篇文章主要介紹了Vue組件模板形式實(shí)現(xiàn)對象數(shù)組數(shù)據(jù)循環(huán)為樹形結(jié)構(gòu),本文用vue實(shí)現(xiàn)方式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-07-07
vue/Element?UI實(shí)現(xiàn)Element?UI?el-dialog自由拖動(dòng)功能實(shí)現(xiàn)
最近工作上需要在el-dialog基礎(chǔ)上進(jìn)行些功能的改動(dòng),下面這篇文章主要給大家介紹了關(guān)于vue/Element?UI實(shí)現(xiàn)Element?UI?el-dialog自由拖動(dòng)功能實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-06-06
如何使用electron將vue項(xiàng)目打包成.exe文件(保姆級(jí)教程)
本文給大家介紹如何使用electron將vue項(xiàng)目打包成.exe文件,大家要注意一下vue2項(xiàng)目,使用的vue-element-admin框架,用electron打包成.exe文件,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-03-03
Vue實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例，幫助大家更好的理解和使用前端框架進(jìn)行開發(fā)，感興趣的朋友可以了解下2021-02-02
這篇文章主要給大家介紹了關(guān)于vue3封裝放大鏡組件的相關(guān)資料,封裝之后,使用起來就更簡單了,一個(gè)組件一行就可以,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
vue elementui 實(shí)現(xiàn)搜索欄公共組件封裝的實(shí)例代碼
這篇文章主要介紹了vue elementui 搜索欄公共組件封裝,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
Vue項(xiàng)目報(bào)錯(cuò):Uncaught?SyntaxError:?Unexpected?token?'＜&a
最近在做vue項(xiàng)目時(shí),需要引入一個(gè)第三方的js文件,在index.html中通過以下方式引入JS文件編譯后就報(bào)了這個(gè)問題,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目報(bào)錯(cuò):Uncaught?SyntaxError:?Unexpected?token?'＜'的解決方法,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章介紹了vue中過濾器的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了element-ui 彈窗組件封裝的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01