v-for 遍历对象

<!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.0">
    <script src="../js/vue.js"></script>
</head>
 
<body>
    <div id="app">
        <table width="'260px" border="1">
            <caption>学生信息表</caption>
            <tr>
                <th v-for='(value,key) in students'>{{key}}</th>
            </tr>
            <tr>
                <td v-for='(value,key) in students'>{{value}}</td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                students:
                {
                    name: 'Tom',
                    gender: 'male',
                    age: 18,
                    phone: 16314773654
                },
            }
        })
    </script>
</body>
 
</html>

(value,key) in 对象 value是对象的值,key是对象的键(属性)
(value,key,index) in 对象 value是对象的值,key是对象的键(属性),index是索引

v-for 遍历数组

(value,index) in 数组 value是对象,index是索引

防止渲染错位

v-for 绑定 key

<p v-for='book in books' v-bind:key="book.id">
<input type="checkbox">
<span>Id:{{book.id}},书名：{{book.tittle}}</span>
</p>

vue 笔记

v-for 遍历对象

v-for 遍历数组

防止渲染错位