v-for 列表渲染---表格的制作

最新推荐文章于 2024-09-03 12:45:00 发布

lily2016n

最新推荐文章于 2024-09-03 12:45:00 发布

阅读量8.9k

点赞数 4

分类专栏： vue vue学习 vue学习文章标签： vue v-for

本文链接：https://blog.csdn.net/lily2016n/article/details/75647389

版权

vue 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue学习

15 篇文章 0 订阅

订阅专栏

vue学习

14 篇文章 2 订阅

订阅专栏

v-for 指令根据一组数组的选项列表进行渲染

v-for="item in items"

items是一个数组，item是当前被遍历的数组元素。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>

    <body>
        <div id="app">
            <table>
                <thead>
                    <tr>
                        <th>标题1</th>
                        <th>标题2</th>
                        <th>标题3</th>
                        <th>标题4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in items">
                        <td>{{ item.ranking  }}</td>
                        <td>{{ item.point  }}</td>
                        <td>{{ item.number  }}</td>
                        <td>{{ item.sales_volume  }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                 items:[{
                        ranking:'1',
                        point:'阿里巴巴',
                        number:'1000',
                        sales_volume:'2000'
                    },{
                        ranking:'2',
                        point:'阿里巴巴',
                        number:'1000',
                        sales_volume:'2000'
                    },{
                        ranking:'3',
                        point:'阿里巴巴',
                        number:'1000',
                        sales_volume:'2000'
                    },{
                        ranking:'4',
                        point:'阿里巴巴',
                        number:'1000',
                        sales_volume:'2000'
                    },{
                        ranking:'5',
                        point:'阿里巴巴',
                        number:'1000',
                        sales_volume:'2000'
                    }]
            }
        })
    </script>

</html>