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:
-
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
computedproperty calledcptDaysin which I loop through thedaysarray 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 themontharray 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>讨论(0)
加载中...
- 热议问题