javascript - Render closing tag conditionally in order to emulate calendar behavior

Question

Welcome To Ask or Share your Answers For Others

javascript - Render closing tag conditionally in order to emulate calendar behavior

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Render closing tag conditionally in order to emulate calendar behavior

Can I render closing tag conditionally with v-if? And if yes, what's the right way to do it? My first instinct was this:

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

This works on its own, but it wont render </tr><tr> raw - is this expected behavior?

And if this is impossible - what is the best way to break a table row conditionally?

My specific case is - days of the month in an array with additional info for them. Each day has a isSunday property and I want to start a new row after each Sunday (imitating calendar behavior)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:21:42+0000

Usually I recommend to put the all logic in your script and only use properties and call methods in the template section, so for this case I'm gonna define a computed property called cptDays in which I loop through the days array and when I meet a normal day I push it in a week if the day is Sunday I push it and I increment the number of weeks, in the end I return the month array which I loop through it in my template.

Note

I used CSS from bootstrap to give a pretty look, you could remove it and your code will not be changed

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

  }

})

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thi</th>
          <th>Fri</th>
          <th>Sat</th>
          <th>Sun</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="week in cptDays">
          <td v-for="day in week ">{{day.number}}</td>
        </tr>
      </tbody>
    </table>
  </div>

Categories

javascript - Render closing tag conditionally in order to emulate calendar behavior

javascript - Render closing tag conditionally in order to emulate calendar behavior

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags