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 名前空間ユーザーの詳細な説明

推薦する

MySQLインデックスを最適化する方法

1. MySQL のインデックスの使用方法インデックスは、特定の列の値を持つ行をすばやく見つけるため...

各 Nginx プロセスで開くことができるファイルの最大数を設定する方法

1. システム内で開いているファイルの最大数を確認する #現在のリソース制限設定を表示する ulim...

DockerコンテナはホストのMySQL操作にアクセスする

背景:インターフェイスを提供する Flask プロジェクトがあり、これは Docker コンテナを使...

Vue.js での $emit の使用に関する詳細な説明

1. 親コンポーネントは props を使用して子コンポーネントにデータを渡すことができます。 2....

JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...

使用したコマンドを表示するLinuxコマンドメソッドの概要

システムでは多くのコマンドが使用されていますが、使用したコマンドをどのように確認すればよいでしょうか...

Vue のライフサイクルとフック関数

目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...

Vue+Element+Springboot画像アップロードの実装例

最近、たまたま vue+springboot のフロントエンドとバックエンドの分離プロジェクトに触れ...

jsを呼び出すいくつかの方法が整理され、使用が推奨されています

a タグではクリック イベントがよく使用されます。 1. href="javascript...

Linux redis-Sentinel 設定の詳細

ダウンロードダウンロードアドレス: https://redis.io/download /usr/l...

MySQLストレージエンジンについて学びましょう

目次序文1. MySQL メインストレージエンジン: 2. さまざまなストレージエンジンがテーブルを...

CSS 標準: vertical-align プロパティ

<br />原文: http://www.mikkolee.com/13私は最近、ver...

iframe を介してフレームセットを本体に配置する

フレームセットと本文は同じレベルにあるため、本文にフレームセットを配置することはできません。まずペー...

Linuxで相対パスを表現する方法

たとえば、現在のパスが /var/log で、/usr ディレクトリに移動する場合は、次のコマンドを...

aタグ疑似クラスの機能と記述順序は何ですか?

a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...