如何在 vue.js 中映射数组

Question

我正在使用 Vue 和 anime.js 编写代码。我发现我的代码太长了，有 1500 多行。我在这里将我的 sampleText 削减为 5 项以便 Stack Overflow 会接受我的问题，但实际上是 114 项。

另外，我怎样才能将 sampleText 随机放置到 <li> 中？它应该在每个 <li> 位置洗牌 sampleText。

<template>
  <div>
    <ul>
      <li>
        {{ texts.text1 }}
      </li>
      <li">
        {{ texts.text2 }}
      </li>
      <li>
        {{ texts.text3 }}
      </li>
      <li>
        {{ texts.text4 }}
      </li>
      <li>
        {{ texts.text5 }}
      </li>
    </ul>
  </div>
</template>

<script>
import anime from 'animejs/lib/anime.es.js'
import { reactive, onMounted } from '@nuxtjs/composition-api'

const sampleText1 = 'インバウント'
const sampleText2 = 'BtoB'
const sampleText3 = 'セールス'
const sampleText4 = 'OODA'
const sampleText5 = '指標'

const characters =
  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
const charactersLength = characters.length

export default {
  layout: 'default',
  data() {
    return {
      sam1: sampleText1,
      sam2: sampleText2,
      sam3: sampleText3,
      sam4: sampleText4,
      sam5: sampleText5,
    }
  },
  setup() {
    const texts = reactive({
      text1: sampleText1,
      text2: sampleText2,
      text3: sampleText3,
      text4: sampleText4,
      text5: sampleText5,
    })

    const scrambleText = (text, name) => ({ progress }) => {
      if (Math.floor(progress) <= 50) {
        if (Math.floor(progress) >= 50) {
          texts[name] = text
        } else if (Math.floor(progress) % 5 === 0) {
          texts[name] = text.replace(/./g, () =>
            characters.charAt(Math.floor(Math.random() * charactersLength))
          )
        }
      }
    }

    onMounted(() => {
      anime({
        targets: '.main',
        duration: 1000,
        easing: 'linear',
        loop: true,
        update: scrambleText(sampleText1, 'text1'),
      })
      anime({
        targets: '.main',
        duration: 1000,
        easing: 'linear',
        loop: true,
        update: scrambleText(sampleText2, 'text2'),
      })
      anime({
        targets: '.main',
        duration: 1000,
        easing: 'linear',
        loop: true,
        update: scrambleText(sampleText3, 'text3'),
      })
      anime({
        targets: '.main',
        duration: 1000,
        easing: 'linear',
        loop: true,
        update: scrambleText(sampleText4, 'text4'),
      })
      anime({
        targets: '.main',
        duration: 1000,
        easing: 'linear',
        loop: true,
        update: scrambleText(sampleText5, 'text5'),
      })
    })

    return {
      texts,
    }
  },
}
</script>

Answer 1

您可以将所有文本放在一个数组中并像这样对其进行迭代：

<ul>
   <li v-for="text in texts" :key="text">{{ text }}</li>
</ul>

给定的密钥的条件是您的所有文本都是唯一的。

然后更改 onMounted 中的函数以执行以下操作：

texts.forEach((text, index) => {
      anime({
        targets: ".main",
        duration: 1000,
        easing: "linear",
        loop: true,
        update: scrambleText(text, index),
      });
    });

Answer 2

这看起来是数组和循环的一个很好的用例。

将示例文本放入 array, and iterate that with a for-loop.
而不是对象
更新 scrambleText() 调用以传递数组索引而不是之前用于您的对象的对象键：

const texts = reactive([ // 1️⃣
  'インバウント',
  'BtoB',
  'セールス',
  'OODA',
  '指標',
  //...
])

onMounted(() => {
  for (let i = 0; i < texts.length; i++) { // 1️⃣
    anime({
      duration: 1000,
      easing: 'linear',
      loop: true,
      update: scrambleText(texts[i], i), // 2️⃣
    })
  }
})

在您的模板中，使用 v-for 迭代 texts 数组：

<ul>
  <li v-for="text in texts">{{ text }}</li>
</ul>

demo

如何在 vue.js 中映射数组

How can I map array in vue.js

javascript

vue.js

anime.js

vue-composition-api