Odd and even row styles under vue v-for loop - Code World

Odd and even row styles under vue v-for loop

Others 2021-04-01 13:51:17 views: null

<div v-for="item in list" :key="item.id" class="list-style">
	<div class="item-style">
		<p>{
    
    {
    
    item.preName}</p>
	</div>
</div>

<style>
/* 奇数行的样式 */
.list-style:nth-child(odd)>.item-style {
    
    
	background: #f8fbfd;
}

/* 偶数行的样式 */
.list-style:nth-child(even)>.item-style {
    
    
	background: #666;
}
</style>

effect

Insert picture description here

Guess you like

Origin blog.csdn.net/weixin_43908123/article/details/108541715

Odd and even row styles under vue v-for loop

Vue v-for loop

Vue V-for nested loop array

vue - the key in the v-for loop object

How to better use VUE v-for loop

Vue common command v-for list loop

Vue loop rendering v-for and v-if, key

Four kinds of data of v-for loop in VUE, and related parameter order, and precautions of v-for

vue series of articles (9) v-for conditional loop

vue how the v-for loop variables into the property in the name of class

VUE loop statement v-for bind label attributes

In vue, the v-for loop traverses the picture without displaying the wrong solution

[vue3] ref gets the elements rendered by the v-for loop

Analyzing it is odd or even

zzulioj 1018: odd even

Case: even and odd

3800. Odd or Even

3800. Odd or Even

Adjust odd and even order

Vue's v-if/show conditional statement and v-for loop statement---kalrry

Vue conditional judgment and loop traversal (v-if, v-elseif, v-else, v-show, v-for)

Java program(even no in even index and odd no in odd index)

The odd array on the left, on the right the even

A. Add Odd or Subtract Even

Odd and even number of sorted array

Two methods of odd and even judgment

Judgment of odd and even numbers.

MySQL odd and even number judgment

Python odd-even sum

vue element-ui v-for loop to upload and delete pictures dynamically

Recommended

Ranking

vue project automated build tools 1.0, support for multi-page build

JDBC add, update, delete data

SpringCloud combat service in response to the decline tutorial series (Chapter IV)

A segmentation fault (core dumped) error occurs when C+11 compiles and calls the PCL library

Django achieve websocket

Go语言并发之道--笔记1

Three-tier structure and application

Zhejiang data structure after-school exercise practice two 7-2 Reversing Linked List (25 points)

Front-end interview brushing day9 (updated daily high-frequency inspection points for front-end interviews)

The difference between the shell of the single and double quote

Daily

More

2024-05-02(0)

2024-05-01(4)

2024-04-30(36)

2024-04-29(5)

2024-04-28(12)

2024-04-27(29)

2024-04-26(22)

2024-04-25(32)

2024-04-24(30)

2024-04-23(30)