SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'/> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script> -->

	<link rel="stylesheet" type="text/css" href="/static/css/normalize-8.0.0.css">

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.min.css">
	<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.min.js"></script>

	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>	

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>


	<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

	<!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
	<!-- <script type="text/javascript">new VConsole()</script> -->

<div id="app">
    <div>{{1}}</div>
    <div>{{list}}</div>
    <div>{{splitList}}</div>
    <!-- <div class="wrap">
        <div class="item" v-for="item in list">{{item}}</div>
    </div> -->
    <div class="wrap" >
        <div class="list" v-for="item1 in splitList">
            <div class="item" v-for="item2 in item1">{{item2}}</div>
        </div>
    </div>
</div>
<style>
    .list{
        display: flex;
        flex-wrap: wrap;
    }
    .list:nth-child(2n+1){
        flex-direction: row-reverse;
    }
    .list:first-child{
        flex-direction: row;
    }
    .item{
        padding: 10px 20px;
        background: #999;
        /* margin: 10px; */
        flex: 0 0 25%;
    }
    


    .item:after{
        content: '右'
    }
    .list:nth-child(2n+1) .item:after{
        content: '左'
    }
    .list .item:last-child:after{
        content: '下'
    }
    .list:first-child .item:after{
        content: '下'
    }
    .list:last-child .item:last-child:after{
        content: '上'
    }
</style>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                // list: Array.from({length: 20}).map((v,i)=>i+1),

                list: Array.from({length: 18}).map((v,i)=>i+1)
            }
        },
        computed: {
            splitList(){
                const list = [];
                let i = 0;
                list.push(this.list.slice(0,1));
                i++;
                while(i < this.list.length){
                    list.push(this.list.slice(i,i+4));
                    i+=4;
                }
                return list;
            }
        }
    })
</script>
</body>
</html>