使用Vue展示数据

Vue数据展示

	数据展示、删除（都是写死的数据）

<script src="vue.min.js"></script>
<div id=app>
	<table style="border-collapse:collapse" border="1">
		<tr>
			<td>编号</td>
			<td>姓名</td>
			<td>年龄</td>
			<td>班级</td>
			<td>操作</td>
		</tr>
		<tr v-for="(item,index) in UserList">     //遍历数据源
			<td>{{index+1}}</td>
			<td>{{item.name}}</td>
			<td>{{item.age}}</td>
			<td>{{item.class}}</td>
			<td><input type="button" v-on:click="shan(index)" value="删除"/>
		</tr>
	</table>
</div>
<script>
	var vm=new Vue({
		el:"#app",
		data:{                //数据源
			UserList:[
				{name:"张三",age:18,class:1801},
				{name:"李四",age:22,class:1804},
				{name:"王五",age:25,class:1809}
			]
		},
		methods:{
			shan:function(index){
				if(confirm("你确认要删除该条数据吗？"))
				{
					this.UserList.splice(index,1)
				}
			}
		}
	});
</script>

  因为咱也是刚开始学习Vue,所以有的地方写不对的地方也希望大佬们给指点出来
  (手动狗头🐕）

使用Vue组件进行数据展示

	删除和上面是一样的

<div id="app">
	<my-comp></my-comp>
</div>
<template id=soure>
	<table style="border-collapse:collapse" border="1">
		<tr>
			<td>编号</td>
			<td>姓名</td>
			<td>年龄</td>
			<td>班级</td>
		</tr>
		<tr v-for="(item,index) in UserList">     //遍历数据源
			<td>{{index+1}}</td>
			<td>{{item.name}}</td>
			<td>{{item.age}}</td>
			<td>{{item.class}}</td>
		</tr>
	</table>
</template>
<script>
	var vm=new Vue({
		el:"#app",
		components:{
			"my-comp":{
				template:"#soure",  //数据展示的ID
				data:function(){
					return{
						UserList:[
							{name:"张三",age:18,class:1801},
							{name:"李四",age:22,class:1804},
							{name:"王五",age:25,class:1809}
							]
   					}
				}
			}
		}
	})
</script>