Vue.js，jquery 實現tabe切換

孫淑建發布于2019-08-21 11:50 / 2825人閱讀

摘要：切換在各個網頁中經常用到，平常用比較容易實現，使用中的選擇其余同胞元素，為了加深記憶順便把的代碼貼一下。

table切換在各個網頁中經常用到，平常用jQuery比較容易實現，使用jQuery中的siblings選擇其余同胞元素，為了加深記憶順便把jQuery的代碼貼一下。

  $("#tit span").click(function() {
            var i = $(this).index();//下標第一種寫法
            //var i = $("tit").index(this);//下標第二種寫法
            $(this).addClass("select").siblings().removeClass("select");
            $("#con li").eq(i).show().siblings().hide();
        });

上面的代碼我是百度來的，實現方法也比較多，作為一個前端小白剛開始使用vue寫感覺好難過，大家不要嫌棄我蠢

全部
商品
新聞

我用vue直接來操作DOM雖然可以實現，但我自己都覺得有些蠢，然后我百度了一下，果然大神就是給力，


    
        
         //這段代碼通過indexs==index的值來判斷active類，通過a方法來決定indexs 的值 反正以我的水平是寫不出來的
    
    
        {{w}}

.wrap div{
        width: 300px;
        height: 300px;
        background-color: #0cc;
    }
.active{
    background-color: red
}

上面代碼來自池劍鋒使用vue實現tab切換例子

他的代碼中內容部分來自box中的數據，為了讓內容部分更加靈活，我又想到了一個比較笨的方法

 
     fhgfdshdf
     sdfsdfsfsfsdfdsfffffffff
     dsfdfgdfgdfgdfAAAAAAAAAAAA

這樣就可以直接在內容部分隨意編輯了，不知道各位大神還有沒有更好的方法歡迎大家指教
本文旨在自己歸納學習，寫的不好請大家見諒

GPU云服務器云服務器 jquery按鈕切換 jquery點擊切換 jquery圖片切換 jquery標簽頁切換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87167.html

在沒有DOM操作的日子里，我是怎么熬過來的（上）

摘要：至于我為何要這么做，請聽閏土娓娓道來。那么接下來，正文從這開始熟悉閏土的朋友都知道，我是從時代過來的前端，在剛接觸和這類框架的時候，完全可以用一臉懵逼來形容我，最為貼切。作者閏土少年出處本博客的文章如無特殊說明，均為原創，轉載請注明出處。 showImg(https://segmentfault.com/img/bVZjKW?w=670&h=442); 前言在我動筆寫這篇文章的時候，...

shuibo 2019-08-21 17:49 評論0 收藏0
使用Vue寫一個datepicker

摘要：演示地址希望大家能給個功能期望這個目前僅實現了一些常用的功能選擇時間這話說得有點多余最大最小時間限制中英文切換其實也就星期和月份需要切換可以以形式使用，也可在瀏覽器環境中直接使用沒了。。。前言寫插件是很有意思，也很鍛煉人，因為這個過程中能發現許多的細節問題。在前端發展的過程中，jQuery無疑是一個重要的里程碑，圍繞著這個優秀項目也出現了很多優秀的插件可以直接使用，大大節省了開發者...

luckyyulin 2019-08-22 10:35 評論0 收藏0
利用K8S技術棧打造個人私有云（連載之：私有云客戶端打造）

摘要：前端技術棧還是非常龐大的，為了能夠借助已經存在的輪子來造出一輛車，所以我選擇了進行實踐。狀態的管理的狀態管理依靠完成，用其來管理的所有組件狀態。私有云客戶端打造主頁面首先是主頁面，可以打開任何一個云主機系統的頁面看，基本類似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技術棧打造個人私有...

Jingbin_ 2019-06-28 16:19 評論0 收藏0
利用K8S技術棧打造個人私有云（連載之：私有云客戶端打造）

摘要：前端技術棧還是非常龐大的，為了能夠借助已經存在的輪子來造出一輛車，所以我選擇了進行實踐。狀態的管理的狀態管理依靠完成，用其來管理的所有組件狀態。私有云客戶端打造主頁面首先是主頁面，可以打開任何一個云主機系統的頁面看，基本類似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技術棧打造個人私有...

shiina 2019-07-01 16:41 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 評論0 收藏0