如何在2v- $index循环中使用for值创建变量？

Question

我正在尝试使用2v-for循环将一个月的日期放入表中。

我想通过创建一个等于((r_index - 1) * 7 + c_index) - 2的t_index变量来缩短代码，但不知道如何在v-for循环中合理地做到这一点。

我试图使用一个计算组件，但它并不像预期的那样工作。那么，哪种方法是最有效的呢？

<tr v-for="r_index in 5">
  <td v-for="c_index in 7" class="p-1">
    <div class="form-row">
      <div class="col-sm-12 text-left">
        <span v-if="(r_index - 1) * 7 + c_index - 2 === 1">December</span>
        <span v-if="(r_index - 1) * 7 + c_index - 2 > 0 && (r_index - 1) * 7 + c_index - 2 <= 31">{{ (r_index - 1) * 7 + c_index - 2 }}</span>
        <span v-else>&#8203;</span>
      </div>
    </div>                  
  </td>
</tr>

Example for December 2020

Answer 1

有一个简单明了但鲜为人知的解决方案：

<tr v-for="r_index in 5">
  <td v-for="c_index in 7" class="p-1">
    <div class="form-row">
      <div class="col-sm-12 text-left" :set="t_index = ((r_index - 1) * 7 + c_index) - 2">
        <span v-if="t_index === 1">December</span>
        <span v-if="t_index > 0 && t_index <= 31">{{ t_index }}</span>
        <span v-else>&#8203;</span>
      </div>
    </div>                  
  </td>
</tr>

我不是这个方法的作者--我是在https://dev.to/pbastowski/comment/7fc9上看到的

为了完整起见，我将在这里引用它：

对于那些现在可能认为，“嘿，我不知道在Vue中有一个没有文档记录的：

”的人来说，事实并非如此。我在这里所做的是依赖于这样一个事实，即Vue将计算任何绑定属性的集合，而我只是选择发明一个名为: JavaScript的属性。

注意，绑定属性是以:或v-bind:为前缀的属性。双引号内的JavaScript表达式将在当前组件的上下文中求值，项目变量仍将在设置它的v-for之外可用。因此，它不是一个局部变量，而是一个局部分配的组件作用域(非反应性)变量。

请注意，不必先在数据组件中声明此属性。但是，如果您不声明它，它将不会是反应性的。在上面的示例中，如果它是反应性的，对我来说并不重要，但如果您使用此模式，则需要记住这一点

这是Florian的代码分支(感谢Florian)，展示了工作中的模式。codesandbox.io/s/6nwyw3zzwz

Answer 2

要使代码更具可读性，请使用方法。这个(r_index - 1) * 7 + c_index - 2 === 1可以转换成一个方法，接受r_index和c_index并返回一个布尔值。这个(r_index - 1) * 7 + c_index - 2 > 0 && (r_index - 1) * 7 + c_index - 2 <= 31也是如此。最后，创建一个t_index方法，该方法接受r_index和c_index并返回(r_index - 1) * 7 + c_index - 2。