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

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

v-for="item in items"

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


<html>

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

    <body>
        <div id="app">
            <table>
                <thead>
                    <tr>
                        <th>标题1th>
                        <th>标题2th>
                        <th>标题3th>
                        <th>标题4th>
                    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>

效果图如下

v-for 列表渲染---表格的制作_第1张图片

你可能感兴趣的:(vue,vue学习,vue学习)