日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用vue3和typeScript怎么實現(xiàn)一個穿梭框功能-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用vue3和typeScript怎么實現(xiàn)一個穿梭框功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

從事成都服務(wù)器托管，服務(wù)器租用，云主機(jī)，雅安服務(wù)器托管，空間域名，CDN，網(wǎng)絡(luò)代維等服務(wù)。

思路：用兩個數(shù)組分別記錄左右框框里面的值，根據(jù)復(fù)選框選中狀態(tài)來實現(xiàn)刪除增加即可

html部分



  
  
    
      
列表一

      {{itemLeft.length}}
    
                     {{vo.label}}       
    
  
          ←     →   
                 
列表二
      {{itemRight.length}}
    
                     {{vo.label}}       
    
  

ts部分


css部分

.shuttle {
  width: 800px;
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
  //整個穿梭框
  .shuttle-box {
    width: 300px;
    height: 500px;
    border: 1px solid #ddd;
    //標(biāo)題
    .shuttle-box-title {
      background: #f5f7fa;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      .index-num {
        color: #909399;
        font-size: 12px;
        font-weight: 400;
      }
    }
    //列表
    .shuttle-box-list {
      padding: 20px;
      //一個列表item
      .shuttle-box-item {
        line-height: 2.0;
      }
    }
  }
  //左右穿梭按鈕
  .shuttle-click {
    padding-top: 60px;
    cursor: pointer;
    span {
      padding: 5px 10px;
      display: inline-block;
      background: #409eff;
      color: #ffffff;
      margin: 0 5px;
      text-align: center;
    }
  }
}
上述就是小編為大家分享的使用vue3和typeScript怎么實現(xiàn)一個穿梭框功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
                                                

                                                本文題目：使用vue3和typeScript怎么實現(xiàn)一個穿梭框功能-創(chuàng)新互聯(lián)                                                

                                                文章地址：http://www.dlmjj.cn/article/gshes.html
                                            
                                            

                                                

                                                    
其他資訊