VUE でタブページを切り替える 4 つの方法

1. 静的実装方法:

効果画像:

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>タブの操作を表示</title>
  <link rel="stylesheet" href="../css/demo.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<本文>
<div class="demo_warp" id="my">
<ul class="tab_tit">
  <li :class="n==1?'active':''" @click="n=1">タイトル 1</li>
  <li :class="n==2?'active':''" @click="n=2">タイトル 2</li>
  <li :class="n==3?'active':''" @click="n=3">タイトル 3</li>
  <li :class="n==4?'active':''" @click="n=4">タイトル 4</li>
</ul>
<!-- 内永 -->
<div class="tab_con">
  <div v-show="n==1">コンテンツ 1</div>
  <div v-show="n==2">コンテンツ 2</div>
  <div v-show="n==3">コンテンツ 3</div>
  <div v-show="n==4">コンテンツ 4</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> Vue.config.productionTip=false </script>  
<script src="../js/tab.js" type="text/javascript"></script>
</本文>
</html>

*{
  マージン: 0;
  パディング: 0;
  ボックスのサイズ:境界線ボックス;
}
本文、html{
 高さ: 100%;
}
.demo_warp .tab_tit {
  ディスプレイ: フレックス;
  フレックス: 1;
  マージン:.2rem;
}
.demo_warp .active { 
  色：赤;
  背景色: cadetblue;
}
.demo_warp ul li {
  リストスタイル: なし;
  幅: 23%;
  テキスト配置: 中央;
  背景色: #ccc;
  マージン:0 1%;
}
.demo_warp .tab_con {
  幅: 100%;
  高さ: 3rem;
  境界線:1px実線rgb(85, 85, 177);
  テキスト配置: 中央;
}

window.onload = 関数(){
  新しいVue({
    el:'#my',
      データ:{//レスポンシブデータ データが変更されるとページも変更されます n:1
    }
  })

}

2. 第2のシミュレーション動的方法

効果は上の図に示されています: (省略)
コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>タブの操作を表示</title>
  <link rel="stylesheet" href="../css/demo.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<本文>
<div class="demo_warp" id="my">
<ul class="tab_tit">
  <li v-for="(v,i) タイトル内" :class="n==i?'active':''" @click="n=i">{{v}}</li>
</ul>
<!-- 内永 -->
<div class="tab_con">
  <div v-for="(v,i) in con" v-show="n==i">{{v}}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> Vue.config.productionTip=false </script>  
<script src="../js/tab.js" type="text/javascript"></script>
</本文>
</html>

*{
  マージン: 0;
  パディング: 0;
  ボックスのサイズ:境界線ボックス;
}
本文、html{
 高さ: 100%;
}
.demo_warp .tab_tit {
  ディスプレイ: フレックス;
  フレックス: 1;
  マージン:.2rem;
}
.demo_warp .active { 
  色：赤;
  背景色: cadetblue;
}
.demo_warp ul li {
  リストスタイル: なし;
  幅: 23%;
  テキスト配置: 中央;
  背景色: #ccc;
  マージン:0 1%;
}
.demo_warp .tab_con {
  幅: 100%;
  高さ: 3rem;
  境界線:1px実線rgb(85, 85, 177);
  テキスト配置: 中央;
}

window.onload = 関数(){
  新しいVue({
    el:'#my',
      data:{//レスポンシブデータデータが変更されるとページも変更されますn:0、
     title:["タイトル 1","タイトル 2","タイトル 3","タイトル 4"],
     con:["コンテンツ 1","コンテンツ 2","コンテンツ 3","コンテンツ 4"]
    }
  })
}

3. 3番目の動的データ方式

効果図: (スクロールバーの実装方法)

ここに画像の説明を挿入

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>タブの操作を表示</title>
  <link rel="stylesheet" href="../css/demo.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<本文>
<div class="demo_warp" id="my">
<ul class="tab_tit">
  <li v-for="(v,i) リスト内" :class="n==i?'active':''" @click="n=i">{{v.title}}</li>
</ul>
<!-- 内永 -->
<div class="tab_con">
  <div v-for="(v,i) リスト内" v-show="n==i">{{v.con}}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> Vue.config.productionTip=false </script>  
<script src="../js/tab.js" type="text/javascript"></script>
</本文>
</html>

*{
  マージン: 0;
  パディング: 0;
  ボックスのサイズ:境界線ボックス;
}
本文、html{
 高さ: 100%;
}
.demo_warp .tab_tit{
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;
  空白: ラップなし;
  オーバーフロー-y: 非表示;
  オーバーフローx: スクロール; 
   マージン:1% 1% 1% 0;
}
  ::-webkit-スクロールバー{
   表示: なし;
  }
.demo_warp .active { 
  色：赤;
  背景色: cadetblue;
}
.demo_warp ul li {
  リストスタイル: なし;
  パディング:1.2% 3.2%;
  テキスト配置: 中央;
  背景色: #ccc;
  左マージン: 1%;
}
.demo_warp .tab_con {
  幅: 100%;
  高さ: 3rem;
  境界線:1px実線rgb(85, 85, 177);
  テキスト配置: 中央;
}

window.onload = 関数(){
  新しいVue({
    el:'#my',
      data:{//レスポンシブデータデータが変更されるとページも変更されますn:0、
     リスト:[//{title:'タイトル 1',con:'コンテンツ 1'} の形式で、多くのデータ//配列オブジェクトが存在する可能性があります。
       {title:'タイトル 2',con:'コンテンツ 2'},
       {title:'タイトル 3',con:'コンテンツ 3'},
       {title:'タイトル 4',con:'コンテンツ 4'},
       {title:'タイトル 5',con:'コンテンツ 5'},
       {title:'タイトル 6',con:'コンテンツ 6'},
       {title:'タイトル 7',con:'コンテンツ 7'},
       {title:'タイトル 8',con:'コンテンツ 8'},
     ]
    }
  })
}

4. 動的実装方法（バックグラウンドデータの実装をシミュレート）

効果画像:

ここに画像の説明を挿入

コード：

<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>タブの操作を表示</title>
  <link rel="stylesheet" type="text/css" href="../css/demo.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<本文>
<div class="demo_warp" id="my">
  <ul class="tab_tit">
    <li v-for="(v,i) リスト内" :class="m==i?'active':''" @click="m=i" :key="i.title">{{v.title}}</li>
  </ul>
  <!-- 内永 -->
  <div class="tab_con">
    <div v-for="(v,i) リスト内" v-show="m==i" :key="i.con">{{v.con}}</div>
  </div>
  <!-- -----------動的データ----------- -->
<ul class="tab_tit">
  <li v-for="(item, index) in itemList" :class="n==index?'active':''" @click="n=index" :key="index">{{item.name}}</li>
</ul>
<!-- 内永 -->
<div class="tab_con">
  <div v-for="(item, index) in itemList" v-show="n==index" :key="index">{{item.state}}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> Vue.config.productionTip=false </script>  
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../js/tab.js" type="text/javascript"></script>
</本文>
</html>

*{
  マージン: 0;
  パディング: 0;
  ボックスのサイズ:境界線ボックス;
}
本文、html{
 高さ: 100%;
}
.demo_warp .tab_tit{
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;
  空白: ラップなし;
  オーバーフロー-y: 非表示;
  オーバーフローx: スクロール; 
   マージン:1% 1% 1% 0;
}
  ::-webkit-スクロールバー{
   表示: なし;
  }
.demo_warp .active { 
  色：赤;
  背景色: cadetblue;
}
.demo_warp ul li {
  リストスタイル: なし;
  パディング:1.2% 3.2%;
  テキスト配置: 中央;
  背景色: #ccc;
  左マージン: 1%;
}
.demo_warp .tab_con {
  幅: 100%;
  高さ: 3rem;
  境界線:1px実線rgb(85, 85, 177);
  テキスト配置: 中央;
}

タブ

window.onload = 関数(){
  新しいVue({
    el:'#my',
      data(){//レスポンシブデータデータが変更されるとページも変更されます return{
          0,
          午前:0、
         リスト:[
       {title:'タイトル 1',con:'コンテンツ 1'},
       {title:'タイトル 2',con:'コンテンツ 2'},
       {title:'タイトル 3',con:'コンテンツ 3'},
       {title:'タイトル 4',con:'コンテンツ 4'},
       {title:'タイトル 5',con:'コンテンツ 5'},
       {title:'タイトル 6',con:'コンテンツ 6'},
       {title:'タイトル 7',con:'コンテンツ 7'},
       {title:'タイトル 8',con:'コンテンツ 8'},
       ]、 
        アイテムリスト:[]
       }
     },
    方法:{
      getList:function(){//this:--[関数とタイマーの this は window を指します (ただし、this は vue インスタンスを指すようにします)]
        var that=this; // ローカル定義により this ポインターが変更されます // このメソッドが実行されるたびに、事前に配列をクリアして、コードがさらに実行されるときに配列が空であることを確認します // this.itemList = [];
        アクシオス({
          メソッド:'get',
          url:'http://localhost:4000/list'
        }).then(関数(res){
            コンソールログ(res);
            that.itemList = res.data.result;
        }).catch(関数(エラー){
           コンソール.log(エラー);
        })
      }
    },
    マウント:関数(){
         このリストを取得します。
    },
  })
}

ノードサーバー.js

 /*
  Connect は、ノード ミドルウェア フレームワークです。HTTP 処理プロセスを下水処理に例えると、ミドルウェアはフィルターの層のようなものです。各ミドルウェアは、HTTP 処理プロセスでリクエストまたは (および) レスポンス データとステータスを書き換えて、特定の機能を実現します。ミドルウェアは、クライアントとアプリケーション間のリクエストとレスポンスを処理する方法であるフィルターのようなものです。
 */

// サービスノードを開始するための仲介者を作成する node.js  
var connect = require('connect'); //接続を作成します。 var bodyParser = require('body-parser'); //本文解析は、JSON、RAW、テキスト、URL でエンコードされたデータの処理に使用されます。
var リスト = {};
var アプリ = connect()
    .use(bodyParser.json()) //JSON 解析 .use(bodyParser.urlencoded({extended:true}))
   //use() メソッドには、受信リクエスト URL の先頭に一致するオプションのパス文字列もあります //use() メソッドはミドルウェア キューを維持します。use(function(req,res,next){
    //クロスドメイン処理//接続を許可するウェブサイト
    res.setHeader('Access-Control-Allow-origin','*');//任意のオリジンを許可する//許可するリクエストメソッド
    res.setHeader('Access-Control-Allow-Methods','CET','POST','OPTIONS','PUT','PATCH','DELETE'); //任意のメソッドを許可 //許可したいリクエストヘッダー
    res.setHeader('Access-Control-Allow-Headers','*');//任意のタイプを許可 res.writeHead(200,{"Content-Type":"text/plain/xml;charset=utf-8"});//utf-8 トランスコーディング next();//次のメソッドは再帰呼び出しです })
   .use('/list',function(req,res,next){
     varデータ = {
       "コード":"200",
       "メッセージ":"成功",
       "結果"：[
         {name:"携帯電話",state:"購入 1"},
         {name:"バッグ",state:"購入 2"},
         {name:"clothes",state:"購入 3"},
         {name:"コンピューター",state:"購入 4"},
         {name:"電子製品",state:"購入 5"}
      ]
     }
     res.end(JSON.stringify(データ));
     次（）;
   })
   .use('/list_get',function(req,res,next){
    varデータ = {
      "コード":'200',
      "メッセージ":"成功",
      "結果":リスト
    }
    res.end(JSON.stringify(データ));
    次（）;
   })
   .use('/list_add',function(req,res,next){
     if(req.method=='POST'){
       console.log(req.body.name);
       リストをプッシュします({name:req.body.name,state:req.body.state,id:index++});
       var data={"code":200,"msg":"成功"};
       res.end(JSON.stringify(データ));
     }それ以外{
       res.end(JSON.stringify({}));
     }
     次（）;
   })
   .use('/list_del',function(req,res,next){
    コンソールにログ出力します。
    //lists=lists.filter(list=>list.id!=req.body.id);
    for(var i=0;i<lists.length;i++){
      if(req.body.id===lists[i].id){
            リストを連結します(i,1);
      }
    }
    console.log(リスト);
    var data={"code":200,"msg":"成功"};
    res.end(JSON.stringify(データ));
    次（）;
   })
   .listen(4000);
   console.log('サーバーはポート4000で起動しました。');

プラグイン: (ダウンロードが必要なプラグイン)

ここに画像の説明を挿入

1. まずサービスノード nodeServer.js を起動します (閉じることはできません。閉じないとデータが取得されません)
2. 次に、HTML ページを実行します。

プロジェクトで発生したバグ:

vue の v-for ループが実行された後、this が示す問題のため、現在のコンテンツはレンダリングされません。

解決策1:

ここに画像の説明を挿入

解決策2:

ここに画像の説明を挿入

解決策3:

ここに画像の説明を挿入

概要: url: インターフェースは独自のバックグラウンドインターフェースを記述する必要があります。これは単なるシミュレートされたインターフェースです。nodeServer.js ファイルはさまざまな形式でデータ型を定義でき、必要な複数の型をローカルにネストすることもできます。最初に試してみてから、バックグラウンドデータを調整できます。

VUE を学ぶのにおすすめ: ドキュメント::https://cn.vuejs.org/v2/guide/list.html

以上で、VUE タブページを切り替える 4 つの方法についての説明は終了です。VUE タブページ切り替えに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: