快捷導(dǎo)航

Vue實(shí)現(xiàn)Tab選項(xiàng)卡切換

更新時(shí)間：2021年09月07日 15:31:42 作者：wbcra

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)Tab選項(xiàng)卡切換，點(diǎn)擊不同標(biāo)題顯示對(duì)應(yīng)圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

點(diǎn)擊不同的標(biāo)題顯示出相應(yīng)的圖片

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    #tab{
        width:420px;
        margin: 20px auto;
        position: relative;
    }
    #tab ul li{
        width: 100px;
        height: 30px;
        border: 1px solid #6699CC;
        float: left;
        list-style: none;
        text-align: center;
        line-height: 30px;
    }
    #tab ul li:first-child{
        border-right: none;
        /* border-radius: 10px 0px 0px 0px; */
    }
    #tab ul li:last-child{
        border-left: none;
        /* border-radius: 0px 10px 0px 0px; */
    }
    #tab ul .active{
        background-color:orange;
        color:white;
    }
    #tab div{
        width: 415px;
        position: absolute;
        top: 32px;
        display: none;
    }
    #tab div img{
        width: 350px;
        /* border-radius:0px 0px 10px 10px; */
    }
    #tab div.current{
        display: block;
    }
 
</style>
<body>
    <div id="tab">
            <ul>
                <li v-on:mouseover="change(index)" :class="[currentindex==index?'active':'']":key="item.id"v-for="(item,index) in list">{{item.text}}</li>
            </ul>
            <div :class="[currentindex==index?'current':'']" v-for="(item,index) in list">
                <img :key="item.id" v-bind:src="item.imgsrc"/>
            </div>
    </div>
    
    
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:'#tab',
        data:{
            currentindex:'0',//當(dāng)前選項(xiàng)卡的索引
             list:[{
                id:'1',
                text:'apple',
                imgsrc:'imgs/1.jpg'
            },{
                id:'2',
                text:'orange',
                imgsrc:'imgs/2.jpg'
            },{
                id:'3',
                text:'lemon',
                imgsrc:'imgs/3.jpg'
            }]
            },
            methods:{
                change:function(index){
                this.currentindex=index;
                     }
            }
            });
</script>
</html>

效果圖

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何正確理解vue中的key詳解
這篇文章主要給大家介紹了關(guān)于如何正確理解vue中key的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue 利用路由守衛(wèi)判斷是否登錄的方法
今天小編就為大家分享一篇vue 利用路由守衛(wèi)判斷是否登錄的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
VUE 更好的 ajax 上傳處理 axios.js實(shí)現(xiàn)代碼
本篇文章主要介紹了VUE 更好的 ajax 上傳處理 axios.js實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
解決Vue中mounted鉤子函數(shù)獲取節(jié)點(diǎn)高度出錯(cuò)問(wèn)題
本篇文章給大家分享了如何解決Vue中mounted鉤子函數(shù)獲取節(jié)點(diǎn)高度出錯(cuò)問(wèn)題，對(duì)此有興趣的朋友可以參考學(xué)習(xí)下。
2018-05-05
elementui 開(kāi)始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementui 開(kāi)始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼,需要先在main.js中導(dǎo)入相應(yīng)代碼,代碼簡(jiǎn)單易懂,需要的朋友可以參考下
2024-02-02
vue-virtual-scroller 的使用詳解
vue-virtual-scroller是一個(gè)高度可定制的虛擬滾動(dòng)列表插件，它可以在大量數(shù)據(jù)下提供高性能的渲染和滾動(dòng)，這篇文章主要介紹了vue-virtual-scroller 的使用,需要的朋友可以參考下
2023-07-07
vue如何遍歷data所有變量并賦值
這篇文章主要介紹了vue如何遍歷data所有變量并賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例
本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
Vue中key的具體使用
在vue中,key是dom對(duì)象的標(biāo)識(shí),本文主要介紹了Vue中key的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-06-06
vue-cli3項(xiàng)目打包后自動(dòng)化部署到服務(wù)器的方法
這篇文章主要介紹了vue-cli3項(xiàng)目打包后自動(dòng)化部署到服務(wù)器的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-09-09