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> CS
*{
マージン: 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);
テキスト配置: 中央;
}
js
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>
CS
*{
マージン: 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);
テキスト配置: 中央;
}
js
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>
CS
*{
マージン: 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);
テキスト配置: 中央;
}
js
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>
CS
*{
マージン: 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 を起動します (閉じることはできません。閉じないとデータが取得されません) プロジェクトで発生したバグ: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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 画面なしで無線ネットワークに接続しているときに Raspberry Pi の IP アドレスを見つける方法
>>: MySQL テーブルとデータベース シャーディングのアプリケーション シナリオと設計方法
推薦する
v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード
プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...
Dockerのインストール方法とDockerの4つのネットワークモードの詳細説明
1. Dockerをインストールするyum -y install docker-ioインストールが完...
nginx+FastDFS を使ってファイル管理システムを段階的に構築する
目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...
MySQL 8.0 DDLアトミック機能と実装原則
1. DDLアトミック性の概要8.0 より前は、統一されたデータ ディクショナリ dd はありません...
MySQL データベース シェル import_table データ インポート
目次MySQL Shell import_table データのインポート1. import_tabl...
JavaScript の手ぶれ補正とスロットリングの説明
目次安定スロットリング要約する安定自動ドアは人を感知してドアを開け、5 秒間のカウントダウンを開始し...
JS 日付コントロール My97DatePicker の基本的な使い方
My97DatePicker は非常に柔軟で使いやすい日付コントロールです。使い方はとても簡単です。...
Vuex でゲッターとアクションを使用するための追加手順
予備的注釈1.Vue2.xとVue3.xの違い: Vue 3.x にはヘルパー関数はありません。 V...
Dockerコンテナを終了した後も実行を継続する方法
現象：イメージを実行します (例: ubuntu14.04)。 docker run -it --r...
独自のネイティブ JavaScript ルーターを作成する方法
目次序文導入JavaScript 履歴 API独自のネイティブJSルーティングを実装するHistor...
njs モジュールを使用して nginx 構成に js スクリプトを導入する
目次序文1. NJSモジュールをインストールする方法1: NJSモジュールを動的にロードする方法2:...
JSはじゃんけんゲームを実装します
この記事の例では、じゃんけんゲームを実装するためのJSの具体的なコードを参考までに共有しています。具...
Navicat による MySQL パーティショニングの実践
MySQLのパーティショニングは、非常に大きなテーブルを管理するのに役立ちます。MySQLのパーティ...
Linux で特定の時間にコマンドを実行する方法
先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...
MySQL ストアド プロシージャのエラー処理例の詳細な説明
この記事では、例を使用して MySQL ストアド プロシージャのエラー処理について説明します。ご参考...