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 ベストプラクティス: パーティションテーブルの基本タイプ
推薦する
MySQL5.7.21 解凍版インストール詳細チュートリアル図
私は頻繁にシステムをインストールするので、インストールのたびにいくつかのソフトウェアを再インストール...
Nodejs と Socket.IO を組み合わせて Websocket の即時通信を実現
目次WebSocketを使用する理由ソケット.ioオープンソースプロジェクト効果プレビューアプリイン...
MySQL インデックスの設計と最適化の方法
目次インデックスとは何ですか?左端のプレフィックス一致の原則key_lenの計算方法インデックスの最...
Vueの監視プロパティの詳細な説明
目次Vue モニターのプロパティリスナープロパティとは何ですか?リスニングプロパティと計算プロパティ...
モバイルウェブサイトの開発に関するいくつかの結論
ウェブサイトのモバイル版には、少なくともいくつかの基本機能が必要です。 1. ページの適用性の問題:...
MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル
MySQL 8.0のインストールと設定方法は参考までに。具体的な内容は以下のとおりです。ダウンロード...
VMware15.5 インストール Ubuntu20.04 グラフィック チュートリアル
1. インストール前の準備1. 公式ウェブサイトからUbuntu 20.04のイメージファイルを直接...
フォームファイル選択ボックスのスタイルをカスタマイズする例
コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...
js キャンバスは検証コードを実装し、検証コード機能を取得します
この記事の例では、検証コードを作成して取得するためのjsキャンバスの具体的なコードを共有しています。...
CSSメディアクエリのアスペクト比を小さくする方法
CSS メディア クエリには非常に便利なアスペクト比、aspect-ratio があり、幅と高さを直...
ボタンをクリックして画像を切り替える JavaScript
この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...
MySQL はどのようにしてマスターとスレーブの一貫性を確保するのでしょうか?
目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...
MySQL pt-slave-restart ツールの使い方の紹介
目次MySQL マスター スレーブ レプリケーション環境を設定する場合、マスター データベースとスレ...
HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)
この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...
Linuxで大きなファイルを素早くコピーする方法
データをコピーリモートでデータをコピーする場合、通常は rsync コマンドを使用しますが、小さなフ...