Vueはボタン切り替え画像を実装します

Vueはボタン切り替え画像を実装します

この記事では、ボタン切り替え画像を実現するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

タブ

実装手順

1. 静的UI効果を実現する

従来の方法でタグ構造とスタイルを実装する

2. データに基づいてUI効果を再構築する

静的構造とスタイルを Vue テンプレート構文ベースのフォームにリファクタリングして、イベントバインディングと js 制御ロジックを処理します。

基本スタイルを設定する

{
 オーバーフロー: 非表示;
 パディング: 0;
 マージン: 0;
 }

 .tab ul li {
 ボックスのサイズ: 境界線ボックス;
 パディング: 0;
 フロート: 左;
 幅: 100ピクセル;
 高さ: 45px;
 行の高さ: 45px;
 リストスタイル: なし;
 テキスト配置: 中央;
 上境界線: 1px 実線 #ccc;
 右境界線: 1px 実線 #ccc;
 カーソル: ポインタ;
 }

 .tab ul li.active {
 背景色: オレンジ;
 }

 .tab ul li:最初の子 {
 border-left: 1px 青一色;
 }

 .タブdiv{
 幅: 500ピクセル;
 高さ: 300px;
 表示: なし;
 テキスト配置: 中央;
 フォントサイズ: 30px;
 行の高さ: 300px;
 境界線: 1px 青
 上境界線: 0px;
 }

 .tab div.current {
 表示: ブロック;
}

静的レイアウトの実装

<div id="アプリ">
 <button v-on:click="handla">次へ進む</button>
 <button v-on:click="handlc">一方向サイクルスイッチ</button>
 <button v-on:click="handle">戻る</button>

 <div class="tab">
 <ul>
 <li :class="currentIndex==index?'active':''" :key="item.id" v-for="(item,index) in list">{{item.title}}
 </li>
 </ul>
 <div :class="currentIndex==index?'current':''" :key="item.id" v-for="(item,index) リスト内">
 <img :src="item.path">
 </div>
 </div>

</div>

特定の機能を実装する

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
 /* */
 var vm = 新しい Vue({
 el: '#app',
 データ: {
 現在のインデックス: 0,
 リスト: [{
  id: 1,
  タイトル: 「リンゴ」
  パス: 'img/apple.png'
 }, {
  id: 2,
  タイトル:「オレンジ」
  パス: 'img/orange.png'
 }, {
  id: 3,
  タイトル: 「レモン」
  パス: 'img/lemon.png'
 }]
 },
 メソッド: {
 ハンドル: 関数 () {
  (this.currentIndex < 2) の場合 {
  this.currentIndex = this.currentIndex + 1
  }
 },

 ハンドラ: 関数 () {
  (this.currentIndex > 0) の場合 {
  this.currentIndex = this.currentIndex - 1
  }

 },
 ハンドル: 関数 () {
  this.currentIndex = this.currentIndex + 1
  (this.currentIndex > 2) の場合 {
  this.currentIndex = 0
  }

 },

 }
 })
</スクリプト>

最終結果

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue マウスホイールスクロール切り替えルーティング効果を実装する方法
  • Vueはマウスホイールのスクロールによるページ切り替えを実装しています
  • Vueはスワイパーを使用して左右にスライドすることで画像を切り替える
  • Vue カスタム js 画像フラグメント カルーセル切り替え効果実装コード
  • Vueは画像切り替え効果を実現
  • Vueはbase64でエンコードされた画像間の切り替え機能を実装します
  • Vue カードスタイルのクリックして切り替える画像コンポーネントの使用方法の詳細な説明
  • Vueはシンプルな画像切り替え効果を実装します
  • Vue+js 矢印をクリックして画像を切り替える
  • Vue はマウスホバーで画像のソースを切り替える機能を実装しています

<<:  redhat7 に yum 経由で mysql5.7.17 をインストールするチュートリアル

>>:  Linux 名前空間ユーザーの詳細な説明

推薦する

Docker で Portainer ビジュアル インターフェースを構築するための詳細な手順

前回述べた問題を解決するために、オンラインで検索したところ、非常に優れたビジュアル インターフェース...

Mac に MySQL データベースをインストールし、環境変数を設定するためのグラフィック チュートリアル

目次MySQLをインストールする環境変数の設定MySQLをインストールするmysqlをダウンロードし...

CSS3 シンプルカットカルーセル画像実装コード

実装のアイデアまず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コン...

Nginx ログ管理の概要

Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...

CSS で要素を中央揃えにする N 通りの方法

目次序文インライン要素の中央揃えテキストを垂直に中央揃え要素を水平方向に中央揃えにするブロックレベル...

Web2.0: 情報過多の原因と解決策

<br />情報の重複、情報過多、情報強迫、パーソナライズされたカスタマイズ、検索エンジ...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

JavaScript を使用して動的な QQ 登録ページを作成する

目次1. はじめに1. 基本レイアウト2. 写真を自動的に切り替える3. コンテンツを追加する4. ...

MySQL 8.0.12 のインストールと設定のチュートリアル

この記事はMySQL 8.0.12のインストールと設定に関する詳細なチュートリアルを記録しています。...

MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

MySQLのダウンロードとインストール(バージョン8.0.20)のチュートリアルは参考までに、具体的...

HTML テーブルタグチュートリアル (33): セルの垂直配置属性 VALIGN

垂直方向では、セルの配置を上、中央、下に設定できます。基本的な構文<TD VLIGN=&quo...

MySQL 5.7.10 インストール ドキュメント チュートリアル

1. 依存パッケージをインストールする yum -y インストール gcc-c++ ncurses-...

CentOS8でのDockerの使い方の詳しい説明

1. CentOS8でのDockerのインストール カール https://download.doc...

Linux システムでの nginx サーバーのインストールと負荷分散構成の詳細な説明

nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー、メール プ...

React における ref の一般的な使用法の概要

目次Refsとは何か1. 文字列型参照2. コールバック参照React.createRef() 4....