Shulou(Shulou.com)05/31 Report--

This article mainly introduces "vue simple two-dimensional array loop nesting way is what", in the daily operation, I believe that many people in vue simple two-dimensional array loop nesting way is what the problem is, the editor consulted all kinds of data, sorted out a simple and easy to use method of operation, hope to answer the "vue simple two-dimensional array loop nesting way is what" the doubt is helpful! Next, please follow the editor to study!

This is a simple layout. Box {border: 1px solid red; display: flex;} .color {display: flex;}. Color div {width: 100px; height: 50px; text-align: center; line-height: 50px; border: 1px solid blue } / / style code / / create a simple two-dimensional array in data () / / one-dimensional array name: [] two-dimensional array name: [{name: []}] array is simply composed of data () {return {/ / sku 2D data skuData: [{skuTitle: 'color'. SkuChild: [{skuTitle: 'red', sku: 100, skuId: 1}, {skuTitle: 'blue', sku: 100, skuId: 2},]}, {skuTitle: 'size', skuChild: [{skuTitle: 'red', sku: 100, skuId: 3} {skuTitle: 'masking, sku: 100, skuId: 4}, {skuTitle:' sku: 100, skuId: 5},]},} }, / / complete the layout of the two-layer loop {{item_.skuTitle}} / / this is to loop out the first-layer array and save it in item / / this is to loop out the second-layer array. Note that you need to take out / / the two are looped and nested in item.

Vue loop array, loop nested array v-for uses Vue loop to output tags

Write an array in "script" first

Then do a loop output in the "div" tag above, using "v-for"

In the "v-for" tag here, "item" is a single array item, and you can replace the name you want at will. "list" is the array passed in "script".

The whole for statement can be understood as "item" in "list". A single array value does a loop, and when there is a loop, add the output tag.

The "{{item}}" inside the tag displays the contents of a single array on the page.

The effect is shown in the following figure:

The data here can display not only the contents of the array on the front page, but also the array serial number.

Add key to output the sequence of the array.

The display effect is as follows:

Front-end page output loop nested array

The contents of the array above are nested and divided into headings and subheadings.

Then edit the loop output in part of html

The first "ul > li" loop outputs the headline, and the second in the for statement directly looks up the newssubarray under item, and then outputs it in turn.

The output is the "title" of the subarray

This completes the array nesting loop

At this point, the study on "what is the simple loop nesting method of vue two-dimensional array" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.