Vue rendering, 5 lines to 5 lines are automatically displayed on the next line, how to achieve it?

clipboard.png effect

the data sent back is as follows 

              let arr = [
                    {id:1,name:"1",value:100},
                    {id:2,name:"2",value:1},
                    {id:3,name:"3",value:0},
                    {id:4,name:"4",value:15},
                    {id:5,name:"5",value:120},
                    {id:6,name:"6",value:13},
                    {id:7,name:"7",value:1021},
                    {id:8,name:"8",value:11},
                    {id:9,name:"9",value:102},
                    {id:10,name:"10",value:110},
                    {id:11,name:"11",value:180},
                    {id:12,name:"12",value:190},
                    {id:13,name:"13",value:104},
                    {id:14,name:"14",value:102},
                    {id:15,name:"15",value:110},
                    {id:16,name:"16",value:210},
                    {id:17,name:"17",value:310}
                 ];

5 elements in a row, and the unit and load at the beginning of each row are fixed

my html structure is 

            <nav>
            <div class="zhanwei"></div>
            <div class="div_ulall">
                <ul class="ul_one">
                    <li></li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <ul class="ul_one">
                    <li class="li_bottom"></li>
                    <li class="li_bottom">55</li>
                    <li class="li_bottom">55</li>
                    <li class="li_bottom">66</li>
                    <li class="li_bottom">656</li>
                    <li class="li_bottom">666</li>
                </ul>
            </div>
        </nav>

what I want to implement is one line for every five elements, and then the extra one is displayed on the next line (sometimes it is not a multiple of 5, it may be 17, 3, etc.)

Css html5 html javascript
Dec.27,2021

originally said that flex can be done, but there is a crew load in front of each line
. In fact, you can convert the one-dimensional array of arr to two-dimensional, and then render it in vue: 

  
 my idea is to first group the received parameters in groups of five (the last group can be less than five), and then use two v-for loops to implement the function

Previous: Tornado multi-process startup server reported an error

Next: Ask about the difference between the principle of using class and the introduction of function directly.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b380a5-2b934.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b380a5-2b934.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?