vue.js-表格数据的加载和操作

一、要求：

制作如下表格数据渲染并实现点击删除事件

二、代码

代码如下：

1. 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>

2. 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的多种写法：

1. 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>

2. 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！
如有出入，欢迎指正！