<!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>
运行结果
谢谢访问!