<!--作者: V: jbossjf-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
table {
margin: 100px auto;
border: 1px solid #000;
border-collapse: collapse; /*设置表格的边框是否被合并为一个单一的边框*/
border-spacing: 0; /*设置相邻单元格的边框间的距离*/
}
tr {
width: 300px;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #000;
background-color: pink;
}
td, th {
width: 99px;
height: 50px;
line-height: 50px;
text-align: center;
border-right: 1px solid #000;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
</tr>
</thead>
<tbody>
<tr v-for="site in sites">
<td v-text="site.name"></td>
<td v-text="site.age"></td>
<td v-text="site.address"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
sites: []
},
created: function () {
//为了在内部函数能使用外部函数的this对象,要给它赋值了一个名叫self的变量。
var self = this;
$.ajax({
url: '/tablev-for.php',
type: 'get',
data: {},
dataType: 'json'
}).then(function (res) {
console.log(res);
//把从json获取的数据赋值给数组
self.sites = res;
}).fail(function () {
console.log('失败');
})
}
})
</script>

用C#开发生产线监测系统
03-13
208

08-19
420

12-31
461


工业视觉二维码批量识别
12-31
573


工业视觉OCR字符识别
12-31
568

07-27
1273

06-17
1034

02-10
277

01-01
3791

12-31
1460
