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 はカスタムシーケンスを使用して row_number 関数を実装します (詳細な手順)
いくつかの記事を読んだ後、ようやく MySQL で row_number() ソートを実装する方法が...
ネイティブJSでマウススライドによる愛の拡散効果を実現
この記事では、マウスをスライドすると愛が広がる js 特殊効果を紹介します。効果は次のとおりです。 ...
優れたウェブワイヤーフレーム設計・制作ツール13選を紹介
プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...
バージョン管理ツール Rational ClearCase の紹介
Rational ClearCase は、コードやその他のソフトウェア開発資産のバージョン管理を実...
HTML DOM入門_PowerNode Javaアカデミー
DOMとは何ですか? JavaScript を使用すると、HTML ドキュメント全体を再構築できます...
MySQL 一時テーブルの簡単な使用法
MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...
vue3 を使用したジグソーパズルゲームのリファクタリングの例
序文プロジェクト内のパズルゲーム（デジタル華容路とも呼ばれる）を再構築するのに 2 日かかりました。...
MYSQL 左結合の最適化 (10 秒から 20 ミリ秒)
目次【機能背景】 [生のSQL] 【独自SQL解析】 【分析手順】 [最適化されたSQL] 【最適化...
JavaScript は単一のリンクリストプロセス分析を実装します
序文：複数の要素を格納するために、配列は最も一般的に使用されるデータ構造ですが、配列には多くの欠点も...
MySQL 文字列インデックスのより合理的な作成ルールに関する議論
序文MySQL インデックスの使用に関しては、これまでインデックスの最左接頭辞ルール、インデックス ...
Docker で Rancher をデプロイする方法 (落とし穴なし)
操作前に必ずお読みください:注意：管理に rancher を使用する場合は、k8s クラスターが構築...
テキストエリアをレイアウトしたときにテキストが左下にあり、サイズを変更できない問題の解決策
2つの小さな問題ですが、長い間私を悩ませていました。最初の質問テキストエリアの左側のテキストは常にテ...
TypeScript インターフェース定義ケースチュートリアル
インターフェースの役割:インターフェース (英語: interface) の機能は、簡単に言えば、コ...
MySQLリモート接続権限の詳細な説明
1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...
MySQL 5.7.13 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)
この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...