13.《vue之商品列表显示(练习)》

程序员文章站 2022-07-15 14:21:06

...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>V-bind</title>
	</head>
	<script type="text/javascript" src="js/vue.js" ></script>

	<style>
		#tb{
			width: 800px;
			border-collapse: collapse;
			margin: 2px auto;
		}
		#tb th{
			background-color: blue;
			color: white;
			font-size: 16px;
			padding: 5px;
			text-align: center;
			border: 1px solid black;
		}
		#tb td{
		    padding: 5px;
		    text-align: center;
		    border: 1px solid black;
		}
	</style>
	<body>
		<div id="in1">
		    <table id="tb">
		    	<tr>
		    	   <th>编号</th>
		    	   <th>商品名称</th>
		    	   <th>时间</th>
		    	   <th>操作</th>
		    	</tr>
		    	<tr v-for="item in list">
		    		<td>{{ item.id }}</td>
		    		<td>{{ item.name }}</td>
		    		<td>{{ item.ctime }}</td>
		    		<td><a href="#">删除</a></td>
		    	</tr>
		    </table>
		</div>
		<script>		
			var vr=new Vue({
				el:"#in1",
				data:{
					list:[
					  {id:1,name:'占山',ctime:new Date().toDateString()},
					  {id:1,name:'李四',ctime:new Date().toISOString()},
					  {id:1,name:'老王',ctime:new Date().toString()},
					  {id:1,name:'老王',ctime:new Date().toLocaleDateString()},
					  {id:1,name:'老王',ctime:new Date().toLocaleString()}
					 ]
				}
			});
			
		</script>
	</body>
</html>

运行结果

13.《vue之商品列表显示(练习)》

谢谢访问！