一、要求:
制作如下表格数据渲染并实现点击删除事件
二、代码
代码如下:
- body部分:
<table border="1" cellspacing="1" cellpadding="1" id="tab" >
<tr v-for="cl in classs">
<th>{{cl.id}}</th>
<th>{{cl.name}}</th>
<th>{{cl.inf}}</th>
<th>{{cl.behavior}}</th>
</tr>
<tr v-for="(item,index) in info">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.inf}}</td>
<td><button type="button" @click="del(index)">删除</button></td>
</tr>
</table>
- script部分:
<script type="text/javascript">
new Vue({
el:'#tab',
data:{
classs:[
{id:'ID',name:'名字',inf:'描述',behavior:'操作'}
],
methods:{
del:function(index){
this.info.splice(index,1)
}
}
})
</script>
正常效果图:
三、补充写法
补充对于th的多种写法:
- body部分:
<table border="1" cellspacing="1" cellpadding="1" id="tab" >
<tr v-for="cl in classs">
<th>{{cl.id}}</th>
<th>{{cl.name}}</th>
<th>{{cl.inf}}</th>
<th>{{cl.behavior}}</th>
</tr>
<tr>
<th>{{classs[0].id}}</th>
<th>{{classs[0].name}}</th>
<th>{{classs[0].inf}}</th>
<th>{{classs[0].behavior}}</th>
</tr>
<tr>
<th>{{msg.id}}</th>
<th>{{msg.name}}</th>
<th>{{msg.inf}}</th>
<th>{{msg.behavior}}</th>
</tr>
<tr v-for="(item,index) in info">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.inf}}</td>
<td><button type="button" @click="del(index)">删除</button></td>
</tr>
</table>
- script部分:
<script type="text/javascript">
new Vue({
el:'#tab',
data:{
classs:[
{id:'ID',name:'名字',inf:'描述',behavior:'操作'}
],
msg:{id:'ID',name:'名字',inf:'描述',behavior:'操作'},
info:[
{id:'1',name:'a',inf:'amorous'},
{id:'2',name:'b',inf:'beautiful'},
{id:'3',name:'c',inf:'clever'},
{id:'4',name:'d',inf:'delicious'},
]
},
methods:{
del:function(index){
this.info.splice(index,1)
}
}
})
</script>
补充后的效果图:
over!
如有出入,欢迎指正!