Javascript 如何在vue.js中映射数组

我正在使用Vue和

anime.js

编写代码。我发现我的代码太长，由1500多行组成。我将我的

sampleText

剪切为5项，这样堆栈溢出就可以接受我的问题，但实际上是114项

另外，如何将

样本文本

随机放入

？它应该在每个

位置洗牌

sampleText

{{text.text1}

您可以将所有文本放在一个数组中，然后像这样迭代：

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

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

将示例文本放入，而不是对象，然后使用迭代


更新
scrambleText（）
调用以传递数组索引，而不是以前用于对象的对象键：


const text=reactive（[//1️⃣
'インバウント',
“BtoB”，
'セールス',
“OODA”，
'指標',
//...
])
未安装（（）=>{
对于（设i=0；i

在模板中，使用a来迭代
文本
数组：

{{text}


您使用的
scrambleText
假定为原始对象，而不是您最初建议的数组。如果
text
是一个数组，那么第二个参数应该是
index
。嗨！谢谢你的帮助。但是出现了一个错误，上面写着TypeError:text.forEach不是一个函数，应该对这些项进行任何更改吗<代码>常量sampleText1=インバウント' const sampleText2='BtoB'const sampleText3='セールス' const sampleText4='OODA'const sampleText5='指標'    data（）{return{sam1:sampleText1，sam2:sampleText2，sam3:sampleText3，sam4:sampleText4，sam5:sampleText5，}}，setup（）{const text=reactive（{text1:sampleText1，text2:sampleText2，text3:sampleText3，text4:sampleText4，text5:sampleText5，}）

我可能不了解加扰功能…我在codesandbox中很快就把它放了出来，并使用了

这个。

而不是

反应式的
：嗨！谢谢你。但是为什么anime.js对我不起作用呢？为什么呢？既然它有114个项目，我怎么能每个ul只显示12个项目呢？
texts.forEach((text, index) => {
      anime({
        targets: ".main",
        duration: 1000,
        easing: "linear",
        loop: true,
        update: scrambleText(text, index),
      });
    });