vueJSで画像の水平スライドを実装する方法

画像の水平スライドを実現する VueJS メソッド: 1. npm を使用して vue-awesome-swiper をインストールします; 2. main.js で vue-awesome-swiper を参照します; 3. スワイパーを使用して左右にスライドさせて、画像を切り替えます。

この記事の動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vueJS で画像の水平スライドを実現するにはどうすればよいですか?

vue はスワイパーを使用して左右にスライドして画像を切り替えます:

npm を使用して vue-awesome-swiper

npm install vue-awesome-swiper --save

In をインストールしますmain.js Quote

import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.user(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css'

Use

Effect

$refs が見つからない主な理由は、v-if、 v -for や v-show などのステートメントが親コンポーネントによって渡されるパラメーターに依存する場合、パラメーターは mount() ステージで取得されていません。

DOM のロード後に実際にデータを取得したい場合は、VUE のグローバル API を呼び出す必要があります:this.$nextTick(() => {})

推奨: "最新の 5 つの vue.js ビデオ チュートリアル セレクション"

以上がvueJSで画像の水平スライドを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。