在 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 用作布尔数组，而是用作数字。

<template>
<div v-if="showPlayer === 1"> DIV 1 </div>
<div v-if="showPlayer === 2"> DIV 3 </div>
<div v-if="showPlayer === 3"> DIV 3 </div>
<button @click="onRandomButtonPress">Random!</button>
</template>
<script>
export default {
  data() {
    return {
      showPlayer: 1
    };
  },
methods: {
onRandomButtonPress() {
  this.showPlayer = Math.floor(Math.random()*3 + 1);
},
}
</script>

有多种方法可以解决这个问题。如果您只想使用一个组件并切换源，您可以这样做：首先，将组件的 src 设置为变量：

<lottie-player
          class="justify-content-center"
          :src="animationSrc"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

用你在 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://vuejs.org/v2/guide/components-dynamic-async.html

在 vue.js 中单击按钮时随机生成动画

generate animations randomly on button click in vue.js

javascript

vue.js

lottie