列表渲染

  根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div class="myApp">
        <table v-for="items in students">
            <tr>
                <td>{{items.name}}</td>
                <td>{{items.score}}</td>
            </tr>
        </table>
    </div>
    <script>
    var myApp = new Vue({
        el: '.myApp',
        data: {
            students:[{
                name: '阿美',
                score: 95
            },{
                name: '美美',
                score: 85
            },{
                name: '大美',
                score: 95
            },{
                name: '中美',
                score: 75
            }]
        }
        
    });
    </script>
</body>

</html>
View Code

相关文章: