v-for制作一个简单表格

< 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的特殊属性