Question

我可以使用v-if有条件地呈现结束标记吗？如果是的话，正确的方法是什么？我的第一个直觉是：

<template v-for="day in days">
    <td class="days">{{day.number}}</td>
        <template v-if="day.isSunday">
            </tr>
            <tr>
        </template>
</template>

这是可以单独运行的，但不会呈现</tr><tr>原始-这是预期的行为吗？

如果这不可能-有条件打破表行的最佳方法是什么？

我的具体情况是-阵列中每月的某几天，其中包含其他信息。每天都有一个isSunday属性，我想在每个星期日（模仿日历行为）

之后开始新的一行

Answer 1

通常，我建议将所有逻辑放入脚本中，并且仅在模板部分中使用属性和调用方法，因此在这种情况下，我将定义一个名为computed的{{1}}属性，在其中循环通过cptDays数组，当我遇到正常的一天时，如果一天是 Sunday ，我会在一周内将其推送，并增加周数，最后我返回我在模板中遍历的days数组。

注意

我使用了 bootstrap 中的CSS进行了漂亮的显示，可以将其删除，并且代码也不会更改

month

new Vue({
  el: '#app',
  data: {
    days: [{
        "number": 1,
        "isSunday": false
      },
      {
        "number": 2,
        "isSunday": false
      },
      {
        "number": 3,
        "isSunday": false
      },
      {
        "number": 4,
        "isSunday": false
      },
      {
        "number": 5,
        "isSunday": false
      },
      {
        "number": 6,
        "isSunday": false
      },
      {
        "number": 7,
        "isSunday": true
      },
      {
        "number": 8,
        "isSunday": false
      },
      {
        "number": 9,
        "isSunday": false
      },
      {
        "number": 10,
        "isSunday": false
      },
      {
        "number": 11,
        "isSunday": false
      },
      {
        "number": 12,
        "isSunday": false
      },
      {
        "number": 13,
        "isSunday": false
      },
      {
        "number": 14,
        "isSunday": true
      },
      {
        "number": 15,
        "isSunday": false
      },
      {
        "number": 16,
        "isSunday": false
      },
      {
        "number": 17,
        "isSunday": false
      },
      {
        "number": 18,
        "isSunday": false
      },
      {
        "number": 19,
        "isSunday": false
      },
      {
        "number": 20,
        "isSunday": false
      },
      {
        "number": 21,
        "isSunday": true
      },
      {
        "number": 22,
        "isSunday": false
      },
      {
        "number": 23,
        "isSunday": false
      },
      {
        "number": 24,
        "isSunday": false
      },
      {
        "number": 25,
        "isSunday": false
      },
      {
        "number": 26,
        "isSunday": false
      },
      {
        "number": 27,
        "isSunday": false
      },
      {
        "number": 28,
        "isSunday": true
      },

      {
        "number": 29,
        "isSunday": false
      },
      {
        "number": 30,
        "isSunday": false
      },
      {
        "number": 31,
        "isSunday": false
      }
    ]
  },
  computed: {
    cptDays() {
      let month = [],
        i = 0;
      this.days.forEach((day) => {

        if (!day.isSunday) {
          if (month[i] == undefined) {
            month[i] = [];
            month[i].push(day)
          } else {
            month[i].push(day)
          }


        } else {
          month[i].push(day)
          i++;
        }
      });
      return month;
    }

  }

})

有条件地渲染关闭标签以模拟日历行为

1 个答案: