lottie プレーヤーの JSON アニメーション ファイルが 3 つあります - congratulations1.json、congratulations2.json、congratulations3.json アニメーションは次のとおりです。
おめでとうございます 1:
リーリーおめでとうございます 2:
リーリーおめでとうございます 3:
リーリー注: json ファイルへのパスは、これらの Lottie-player タグの src に記載されています。
単一のボタンをクリックしたときにランダムに表示したい。
私がやったこと:
3 つのアニメーションごとに 3 つの変数を取得しました。変数は、showPlayer1、showPlayer2、および showPlayer3 です。 これらを showPlayer という配列に保存し、値を false に設定します。私のプログラムが正しいかどうかわかりません。 次に何をすればいいのか分かりません。
私の配列:
リーリーこれをやりました。これら 3 つのアニメーションを配列からランダムに表示するには、ボタンのラベル内に何を含めればよいかわかりません。助けてください。
更新されたコード:
ああああ
P粉1564156962024-03-28 22:34:18
以下に示すように、これを実現するには他にも複数の方法があります。ただし、あなたが提案したことを実行したい場合は、showPlayer をブール配列としてではなく、数値として使用します。
リーリーこの問題を解決するには複数の方法があります。 1 つのコンポーネントのみを使用してソースを切り替える場合は、次の手順を実行できます。 まず、コンポーネントの src を変数に設定します:
リーリーdata() の文字列を使用して次のように配列を設定します。
リーリー次に、randomButton のメソッドを次のように設定します。 リーリー
コードサンドボックスをすぐに解読しました。https://codesandbox.io/s/elastic -dijkstra-o7ety?file=/src/components/HelloWorld.vue
vue の :is 属性を使用して動的コンポーネントをロードし、コード内でロードするコンポーネントを設定することもできます。https://v2.vuejs.org/v2/guide/components-dynamic async.html