< html > < head > < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < meta http-equiv= "X-UA-Compatible" content= "ie=edge" > < title >v-for練習做一個表格 </ title > < style > table{ width: 600px; border: 2px solid orangered; text-align: center; } thead{ background-color: orangered; color: white; } < / style > </ head > < body > < div id= "app" > < table > < thead > < tr > < td >姓名 </ td > < td >年齡 </ td > < td >性別 </ td > </ tr > </ thead > < tbody > < tr v-for= 'p in persons' > < td >{{p.name}} </ td > < td >{{p.age}} </ td > < td >{{p.sex}} </ td > </ tr > </ tbody > </ table > </ div > < script type= "text/javascript" src= "../assets/js/vue.js" > < / script > < script > new Vue({ el: '#app', data () { return { persons:[ { name: '張三', age: '18', sex: '男'}, { name: '王五', age: '19', sex: '男'}, { name: '小紅', age: '20', sex: '女'}, { name: '小明', age: '27', sex: '男'}, ] } } }) < / script > </ body > </ html >

執行結果如下圖：

v-for也可以為陣列索引指定別名（或者用於物件的鍵）：

v-for預設行為試著不改變整體，而是替換元素，迫使其重新排序的元素，您需要提供一個key的特殊屬性