【案例分享】在Vue循环中，指定循环次数和范围，选取数据库中的一部分数据循环遍历在前端网页上

最新推荐文章于 2024-02-16 09:52:11 发布

小心你的脚踝

最新推荐文章于 2024-02-16 09:52:11 发布

阅读量450

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_73575951/article/details/131796322

版权

思路：

v-for="(item,index) in list.slice(0, 3)“这种分割数组,然后继续v-for=”(item,index) in list.slice(3, 6)"，可以选取数据库中的一定范围来循环遍历。

实例代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>世界矿场</title>
    <script src="/vue/vue.min.js"></script>
    <script src="/vue/axios.min.js"></script>
    <style>
        h1{
            text-align: center;
            color: rebeccapurple;
        }
        button{
            width: 100px;
            height: 50px;
            border: none;
            border-radius: 15px;
            font-size: large;
            color: white;
            background-color: darkgreen;
            outline: none;
            cursor: pointer;
            box-shadow: 5px 5px 5px rebeccapurple;
        }
        button:hover{
            transform: translate(3px,3px);
        }
        .f1{
            display: flex;
            justify-content: center;
        }
        .z1{
            width: 160px;
            height: 100px;
            border: none;
            border-radius: 8px;
            color: white;
            box-shadow: 5px 5px 5px gold;

            margin-left: 30px;
            text-align: center;
        }
        #z1{
            background-color: goldenrod;
        }
        #z2{
            background-color: chocolate;
        }
        #z3{
            background-color: cyan;;
        }
        #z4{
            background-color: #8A2BE2;
        }
        .xx1{
            /*流式布局*/
            display: flex;
            /*每个子元素均匀分布*/
            justify-content: space-around;
            margin-top: 30px;
        }

        p{
            font-size:10px;
        }
    </style>
</head>
<body>
<a href="01.kingdom.html">主城</a>
<h1>世界矿场</h1>
<div id="app">
    <h2>金矿</h2>
    <div class="f1">
        <div id="z1" class="z1" v-for="res in resList.slice(0,9)">
            <h2>{{res.grade}}级{{res.type}}</h2>
            <strong>产量：{{res.output}}</strong>
        </div>
    </div>
    <div class="xx1">
        <div v-for="index of 9">
            <button>开采</button>
        </div>
    </div>

    <h2>铜矿</h2>
    <div class="f1">
        <div id="z2" class="z1" v-for="res in resList.slice(9,18)">
            <h2>{{res.grade}}级{{res.type}}</h2>
            <strong>产量：{{res.output}}</strong>
        </div>
    </div>
    <div class="xx1">
        <div v-for="index of 9">
            <button>开采</button>
        </div>
    </div>

    <h2>铁矿</h2>
    <div class="f1">
        <div id="z3" class="z1" v-for="res in resList.slice(18,27)">
            <h2>{{res.grade}}级{{res.type}}</h2>
            <strong>产量：{{res.output}}</strong>
        </div>
    </div>
    <div class="xx1">
        <div v-for="index of 9">
            <button>开采</button>
        </div>
    </div>

    <h2>万能矿</h2>
    <div class="f1">
        <div id="z4" class="z1" v-for="res in resList.slice(27,36)">
            <h2>{{res.grade}}级{{res.type}}</h2>
            <strong>产量：{{res.output}}</strong>
        </div>
    </div>
    <div class="xx1">
        <div v-for="index of 9">
            <button>开采</button>
        </div>
    </div>
</div>

</body>
<script>
    new Vue({
        el:'#app',
        data:{
            resList:[]
        },
        methods:{
            showRes(){
                axios.get('http://localhost:8080/resC').then((resp)=>{
                    this.resList=resp.data
                })
            }
        },
        mounted(){
            this.showRes()
        }
    })
</script>
</html>