带索引的数据绑定语法

<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>