在Vue.js中，點選按鈕隨機產生動畫

Question

我有三個lottie播放器json動畫檔案 - congratulations1.json、congratulations2.json 和 congratulations3.json 動畫如下：

恭喜1：

#

<lottie-player
          v-if="showPlayer1"
          class="justify-content-center"
          src="../../../congratulations.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

恭喜2：

#

<lottie-player
          v-if="showPlayer2"
          class="justify-content-center"
          src="../../../congratulations2.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

恭喜3：

#

<lottie-player
          v-if="showPlayer3"
          class="justify-content-center"
          src="../../../congratulations3.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

注意： json 檔案的路徑在這些lottie-player 標記的 src 中提到。

我想在單擊單個按鈕時隨機顯示它們。

我做過的事情：

#我為這三個動畫中的每一個採用了三個變數。變數為 - showPlayer1、showPlayer2 和 showPlayer3。 我將它們保存在名為 showPlayer 的陣列中，並將它們的值設為 false。我不知道我的程序是否正確。 接下來我不知道該怎麼辦。

我的陣列：

#

<script>
export default {
  data() {
    return {
      showPlayer: [
        (showPlayer1 = false),
        (showPlayer2 = false),
        (showPlayer3 = false),
      ],
    };
  },

我已經做到了這一點。我不知道在按鈕標籤內包含什麼來從陣列中隨機顯示這三個動畫。請幫忙。

更新的程式碼：

#

<div class="justify-content-center anim">
        <lottie-player
          v-if="showPlayer === 1"
          class="justify-content-center"
          src="../../../congratulations.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;
      </div>
      <div class="justify-content-center anim">
        <lottie-player
          v-if="showPlayer === 2"
          class="justify-content-center"
          src="../../../congratulations_2.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;
      </div>
      <div class="justify-content-center anim">
        <lottie-player
          v-if="showPlayer === 3"
          class="justify-content-center"
          src="../../../congratulations_3.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;
      </div>

Answer 1

正如我在下面所展示的，還有多種其他方法可以實現這一目標。但如果你想像你建議的那樣做，我不會使用 showPlayer 作為布林數組，而是作為數字。

sssccc

有多種方法可以解決這個問題。如果您只想使用一個元件並切換來源，您可以執行以下操作： 首先，將組件的 src 設定為變數：

;

使用 data() 中的字串設定一個數組，如下所示：

animations: [
    '../../../congratulations.json',
    '../../../congratulations2.json',
    '../../../congratulations3.json',
  ],
  animationSrc: ''

接著為 randomButton 設定一個方法，如下所示：

onRandomButtonPress() {
  this.animationSrc = this.animations[Math.floor(Math.random()*this.animations.length)];
},

我很快就破解了一個codesandbox： https://codesandbox.io/s/elastic -dijkstra-o7ety?file=/src/components/HelloWorld.vue

#你也可以使用vue中的:is屬性來載入動態元件，並在程式碼中設定要載入哪個元件。 https://v2.vuejs.org/v2/guide/components-動態非同步.html