使用索引进行数据绑定的语法

Question

停留在最有可能只是语法问题上。我想用v-for索引替换“ play1”中的“ 1”。

<tr v-for="index in 5">
  <td>{{player1.round1.play1}}</td>
  <td>{{player2.round1.play1}}</td>
</tr>

我尝试了{{player1.round1.play + index}}的许多变体，但没有成功。

Answer 1

<tr v-for="index in 5">
  <td>{{player1.round1['play'+index]}}</td>
  <td>{{player2.round1['play'+index]}}</td>
</tr>

在vue模板的双重卷曲中，内容以javascript处理。

使用javascript查找对象时，您可以使用dot notation或bracket syntax传递密钥。

例如，如果您有一个这样的对象：

const objectA = {
  objectB: {
    objectC: {
    }
  }
};

您可以使用点表示法查找objectC：
objectA.objectB.objectC

或使用方括号：
objectA['objectB']['objectC']

请注意，在使用方括号时，您必须使用简单的类型，数字或字符串（技术上也接受符号，但现在不用担心）。但是，括号语法确实允许您使用变量来访问对象，例如：

let b='objectB';
let c='C';
objectA[b]['object' + c];
objectA[b][`object${c}`];

了解这一点，然后可以使用它来访问vue模板中的正确对象，如下所示：

<td>{{player1.round1['play'+index]}}</td>

或使用模板文字：

<td>{{player2.round1[`play${index}`]}}</td>