problem creating odd and even cell in a table in Vue Js
Here is my code, myData is my vue data model which has some field: a,b, ...
odd-cell and even-cell are the CSS classes with different background color. its a foreach loop, how can i calcultate something like if (length of myData % 2 == 1) in v-if to add the odd and even class in my div.
<div v-for="item in myData">
<div v-if="" class='odd-cell'>
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
<div v-else class='even-cell'>
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
[i am writing in cshtml view page, so you can suggest c# code as well..]
javascript asp.net-mvc vue.js v-for
asked Nov 21 at 4:50
TanvirAhmedKhan
91
add a comment |
Here is my code, myData is my vue data model which has some field: a,b, ...
odd-cell and even-cell are the CSS classes with different background color. its a foreach loop, how can i calcultate something like if (length of myData % 2 == 1) in v-if to add the odd and even class in my div.
<div v-for="item in myData">
<div v-if="" class='odd-cell'>
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
<div v-else class='even-cell'>
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
[i am writing in cshtml view page, so you can suggest c# code as well..]
javascript asp.net-mvc vue.js v-for
asked Nov 21 at 4:50
TanvirAhmedKhan
91
add a comment |
Here is my code, myData is my vue data model which has some field: a,b, ...
odd-cell and even-cell are the CSS classes with different background color. its a foreach loop, how can i calcultate something like if (length of myData % 2 == 1) in v-if to add the odd and even class in my div.
<div v-for="item in myData">
<div v-if="" class='odd-cell'>
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
<div v-else class='even-cell'>
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
[i am writing in cshtml view page, so you can suggest c# code as well..]
javascript asp.net-mvc vue.js v-for
asked Nov 21 at 4:50
TanvirAhmedKhan
91
Here is my code, myData is my vue data model which has some field: a,b, ...
odd-cell and even-cell are the CSS classes with different background color. its a foreach loop, how can i calcultate something like if (length of myData % 2 == 1) in v-if to add the odd and even class in my div.
<div v-for="item in myData">
<div v-if="" class='odd-cell'>
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
<div v-else class='even-cell'>
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
[i am writing in cshtml view page, so you can suggest c# code as well..]
javascript asp.net-mvc vue.js v-for
javascript asp.net-mvc vue.js v-for
asked Nov 21 at 4:50
TanvirAhmedKhan
91
asked Nov 21 at 4:50
TanvirAhmedKhan
91
asked Nov 21 at 4:50
TanvirAhmedKhan
91
asked Nov 21 at 4:50
TanvirAhmedKhan
91
asked Nov 21 at 4:50
TanvirAhmedKhan
91
91
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I refered to a UI framework which now I'm using, name as iView.
Of course, they also support striped table component. So I wondered how they do like that.
.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
background-color: #f8f8f9;
}
As you can see, CSS support for handling each case of even and odd by using nth-child(). There is no more simple way to do like that.
further more, you can use more complex formula as a parameter like this :
(an + b).
W3School Nth-child Example maybe helpful for you.
answered Nov 21 at 6:55
wormwlrm
564
it should be accepted
– imudin07
Nov 22 at 0:07
add a comment |
You can use index:
<div v-for="(item, index) in myData">
<div v-if="" :class="{'odd-cell': index % 2 === 1, 'even-cell': index % 2 === 0}">
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
But there are better solution with css nth-child
div:nth-child(odd) {
background: red;
}
div:nth-child(even) {
background: blue;
}
answered Nov 21 at 4:56
ittus
5,9821723
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405437%2fproblem-creating-odd-and-even-cell-in-a-table-in-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I refered to a UI framework which now I'm using, name as iView.
Of course, they also support striped table component. So I wondered how they do like that.
.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
background-color: #f8f8f9;
}
As you can see, CSS support for handling each case of even and odd by using nth-child(). There is no more simple way to do like that.
further more, you can use more complex formula as a parameter like this :
(an + b).
W3School Nth-child Example maybe helpful for you.
answered Nov 21 at 6:55
wormwlrm
564
it should be accepted
– imudin07
Nov 22 at 0:07
add a comment |
I refered to a UI framework which now I'm using, name as iView.
Of course, they also support striped table component. So I wondered how they do like that.
.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
background-color: #f8f8f9;
}
As you can see, CSS support for handling each case of even and odd by using nth-child(). There is no more simple way to do like that.
further more, you can use more complex formula as a parameter like this :
(an + b).
W3School Nth-child Example maybe helpful for you.
answered Nov 21 at 6:55
wormwlrm
564
it should be accepted
– imudin07
Nov 22 at 0:07
add a comment |
I refered to a UI framework which now I'm using, name as iView.
Of course, they also support striped table component. So I wondered how they do like that.
.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
background-color: #f8f8f9;
}
As you can see, CSS support for handling each case of even and odd by using nth-child(). There is no more simple way to do like that.
further more, you can use more complex formula as a parameter like this :
(an + b).
W3School Nth-child Example maybe helpful for you.
answered Nov 21 at 6:55
wormwlrm
564
I refered to a UI framework which now I'm using, name as iView.
Of course, they also support striped table component. So I wondered how they do like that.
.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
background-color: #f8f8f9;
}
As you can see, CSS support for handling each case of even and odd by using nth-child(). There is no more simple way to do like that.
further more, you can use more complex formula as a parameter like this :
(an + b).
W3School Nth-child Example maybe helpful for you.
answered Nov 21 at 6:55
wormwlrm
564
answered Nov 21 at 6:55
wormwlrm
564
answered Nov 21 at 6:55
wormwlrm
564
answered Nov 21 at 6:55
wormwlrm
564
564
it should be accepted
– imudin07
Nov 22 at 0:07
add a comment |
it should be accepted
– imudin07
Nov 22 at 0:07
it should be accepted
– imudin07
Nov 22 at 0:07
it should be accepted
– imudin07
Nov 22 at 0:07
add a comment |
You can use index:
<div v-for="(item, index) in myData">
<div v-if="" :class="{'odd-cell': index % 2 === 1, 'even-cell': index % 2 === 0}">
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
But there are better solution with css nth-child
div:nth-child(odd) {
background: red;
}
div:nth-child(even) {
background: blue;
}
answered Nov 21 at 4:56
ittus
5,9821723
add a comment |
You can use index:
<div v-for="(item, index) in myData">
<div v-if="" :class="{'odd-cell': index % 2 === 1, 'even-cell': index % 2 === 0}">
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
But there are better solution with css nth-child
div:nth-child(odd) {
background: red;
}
div:nth-child(even) {
background: blue;
}
answered Nov 21 at 4:56
ittus
5,9821723
add a comment |
You can use index:
<div v-for="(item, index) in myData">
<div v-if="" :class="{'odd-cell': index % 2 === 1, 'even-cell': index % 2 === 0}">
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
But there are better solution with css nth-child
div:nth-child(odd) {
background: red;
}
div:nth-child(even) {
background: blue;
}
answered Nov 21 at 4:56
ittus
5,9821723
You can use index:
<div v-for="(item, index) in myData">
<div v-if="" :class="{'odd-cell': index % 2 === 1, 'even-cell': index % 2 === 0}">
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
But there are better solution with css nth-child
div:nth-child(odd) {
background: red;
}
div:nth-child(even) {
background: blue;
}
answered Nov 21 at 4:56
ittus
5,9821723
answered Nov 21 at 4:56
ittus
5,9821723
answered Nov 21 at 4:56
ittus
5,9821723
answered Nov 21 at 4:56
ittus
5,9821723
5,9821723
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405437%2fproblem-creating-odd-and-even-cell-in-a-table-in-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
