vue實現選項卡

阿新 • • 發佈：2021-02-06

技術標籤：vue

選項卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js" 
></script>
    <style>
        #app>div{
            width: 200px;
            height: 300px;
           border: 1px solid red;
        }
        .active{
            background-color: blue;
        }
    </style>
</head>
<body>
  <div id="app">
    <button 
  v-for="(item,index) in list" @click="num=index" :class="{active:index===num}">{{item}}</button>
    <div class="wq" v-for="(item,index) in list1" v-show="index===num?true:false">{{item}}</div>
  </div>
    <script 
>
        new Vue({
            el:"#app",
            data:{
                 num:0,
                list:['1','2','3'],
                list1:['111111','2222222','3333333']
            }
        })
    </script>
</body>
</html>

效果圖
在這裡插入圖片描述

vue實現選項卡

技術標籤：vue 選項卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue和animate動畫庫實現選項卡

本文引入animate動畫庫，使選項卡切換更好看，靈活使用vue的api animate動畫庫官網地址：https://animate.style/

js實現選項卡效果

本文例項為大家分享了js實現選項卡效果的具體程式碼，供大家參考，具體內容如下

用JS實現選項卡

本文例項為大家分享了JS實現選項卡的具體程式碼，供大家參考，具體內容如下

js利用iframe實現選項卡效果

本文例項為大家分享了js利用iframe實現選項卡的具體程式碼，供大家參考，具體內容如下

基於Ionic3實現選項卡切換並重新載入echarts

要求選項卡每切換一次，就載入對應的一個echarts 圖，要有一開始的動畫效果

原生js實現選項卡切換

原生js實現選項卡切換 <body> <div id=\"container\">

微信小程式實現選項卡滑動切換

本文例項為大家分享了微信小程式實現選項卡滑動切換的具體程式碼，供大家參考，具體內容如下

JS實現選項卡外掛的兩種寫法（jQuery和class）

本文例項為大家分享了JS實現選項卡外掛的2種寫法，供大家參考，具體內容如下

原生js實現選項卡

技術標籤：jsjs 1 html <div id="app" class="app"> <div class="header">

jQuery實現選項卡切換圖片

本文例項為大家分享了實現選項卡切換圖片的具體程式碼，供大家參考，具體內容如下

vue cli使用$route.path 處理選項卡高亮與利用vue多次點選跳轉的報錯來實現多次點選回到頂部（方案1）

mounted() { this.footerHightLight(); //改變底部高亮 }, methods: { footerHightLight(path = null) { // console.log(\"當前路徑名：\" + this.$route.path);

Vue實現Tab選項卡切換

本文例項為大家分享了實現Tab選項卡切換的具體程式碼，供大家參考，具體內容如下

JavaScript實現Tab選項卡切換

本文例項為大家分享了js實現選項卡切換的具體程式碼，供大家參考，具體內容如下

iOS實現帶遮罩的彈出選項卡

在我們日常開發的過程中難免會碰到一些選項的需求，下面是我針對我們該次需求做的一個小的Demo，閒話不多說了，上圖片，上程式碼。

JS面向物件程式設計實現的Tab選項卡案例詳解

本文例項講述了JS面向物件程式設計實現的Tab選項卡。分享給大家供大家參考，具體如下：

小程式實現多個選項卡切換

選項卡的功能用途有很多地方：例如商品評論的切換，還有文章分類還有各種各樣的切換功能需要用到。這個實現是通過for迴圈，取數值下標的方式來實現切換

小程式開發中關於選項卡高度自適應和選項卡內按鈕位置固定的實現

首先大家都知道小程式自帶的swiper工具是有預設高度的，所以在實際開發中高度自適應的實現是必修課，比較簡單的實現高度自適應的方法是利用scroll-view工具。

js實現簡單選項卡製作

本文例項為大家分享了js實現簡單選項卡製作程式碼，供大家參考，具體內容如下

bootstrap實現tab選項卡切換

在專案中遇到要實現tab選項卡的關閉功能，專案中用的bootstrap框架，網上有很多外掛，我這裡只是簡單的實現了tab選項卡的切換！ <