Vueはタブ切り替えを実装します
|
この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。 タイトルをクリックすると対応する画像が表示されます コードは次のとおりです
<!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>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<スタイル>
*{
マージン: 0px;
パディング: 0px;
}
＃タブ{
幅:420ピクセル;
マージン: 20px 自動;
位置: 相対的;
}
#タブ ul li{
幅: 100ピクセル;
高さ: 30px;
境界線: 1px 実線 #6699CC;
フロート: 左;
リストスタイル: なし;
テキスト配置: 中央;
行の高さ: 30px;
}
#タブ ul li:first-child{
右境界線: なし;
/* 境界線の半径: 10px 0px 0px 0px; */
}
#タブ ul li:最後の子{
左境界線: なし;
/* 境界線の半径: 0px 10px 0px 0px; */
}
#タブul.active{
背景色:オレンジ;
色：白;
}
#タブdiv{
幅: 415ピクセル;
位置: 絶対;
上: 32px;
表示: なし;
}
#タブdiv画像{
幅: 350ピクセル;
/* 境界線の半径:0px 0px 10px 10px; */
}
#タブdiv.current{
表示: ブロック;
}
</スタイル>
<本文>
<div id="タブ">
<ul>
<li v-on:mouseover="change(index)" :class="[currentindex==index?'active':'']":key="item.id"v-for="(item,index) リスト内">{{item.text}}</li>
</ul>
<div :class="[currentindex==index?'current':'']" v-for="(item,index) リスト内">
<img :key="item.id" v-bind:src="item.imgsrc"/>
</div>
</div>
</本文>
<script type="text/javascript">
var vm = 新しい Vue({
el:'#タブ',
データ：{
currentindex:'0', //現在のタブリストのインデックス:[{
id:'1',
テキスト:'リンゴ',
画像:'imgs/1.jpg'
},{
id:'2',
テキスト:'オレンジ',
画像:'imgs/2.jpg'
},{
id:'3',
テキスト:'レモン',
画像:'imgs/3.jpg'
}]
},
方法:{
変更:関数(インデックス){
this.currentindex=インデックス;
}
}
});
</スクリプト>
</html>レンダリング
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Alibaba Cloud Serverにプログラムをデプロイし、ドメイン名を使用して直接アクセスする方法の詳細な説明
>>: MySQL ベストプラクティス: パーティションテーブルの基本タイプ
推薦する
MySQLスレーブのメンテナンスに関する経験の共有
序文： MySQL マスター/スレーブ アーキテクチャは、最も一般的に使用されるアーキテクチャ セッ...
GolangでMySQLデータベースを操作するための実装コード
序文Golang は、SQL データベースにアクセスするための database/sql パッケージ...
Linux Centos8 CA証明書作成チュートリアル
必要なファイルをインストールする Yum インストール openssl-* -yデータベースインデッ...
Vueプロジェクトをパッケージ化してリリースする手順
目次1. 開発環境から本番環境への移行2. 統一されたリクエストパスを設定する3. パッケージ化コマ...
js タグ構文の使用法の詳細
目次1. ラベルステートメントの紹介2. ラベルステートメントの使用序文：日常の開発では、プログラム...
CSS における z-index: 0 と z-index: auto の違い
最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...
MySQL データベース テーブルとデータベース パーティショニング戦略
まず、テーブルを分割する必要がある理由について説明します。データシートが数百万に達すると、1 回のク...
Vueは大画面ページのスクリーン適応を実現します
この記事では、大画面ページのスクリーンアダプテーションを実現するためのVueの具体的なコードを参考ま...
Vueはシンプルな計算機を実装する
この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...
MySQLクエリ速度が遅く、パフォーマンスが低下する原因と解決策
1. データベースクエリの速度に影響を与えるものは何ですか? 1.1 データベースクエリ速度に影響を...
MySqlは、外部ネットワーク接続クライアントの低速問題を解決するためにskip-name-resolveを使用します。
Tencent Cloud上に構築されたMySQLは、開発用コンピュータでNavicatを使用して...
ORM モデル フレームワークを使用して MySQL データベースを操作する方法
ORM とは何ですか? ORM は Object Relational Mapping の略で、オブ...
Web デザインの経験: 独善的な Web デザイナー
1. ゴミかクラシックか? Web テクノロジーは急速に更新されており、Web サイトのインターフェ...
CentOS 7.9 の zabbix5.0.14 のインストールと設定プロセス
目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...