请大佬看看!小弟想用 vue.component 生成表格,但是不知道咋搞的,咋不行呢?
直接上代码了。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循环生成表格</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<table id="myTable">
<tr>
<th>编号</th>
<th>人员</th>
<th>属性</th>
</tr>
<each-list v-for="row in rows" v-bind:obj="row"></each-list>
</table>
<script>
Vue.component('each-list', {
props:['obj'],
template: <tr><td>{{obj.num}}</td><td>{{obj.person}}</td><td>{{obj.attribute}}</td></tr>
})
var myTable = new Vue({
el:"#myTable",
data:{
rows: [{num:1,person:"张龙",attribute:"外包"},{num:2,person:"赵虎",attribute:"外包"},{num:3,person:"王朝",attribute:"外包"},{num:4,person:"马汉",attribute:"本部"}]
}
});
</script>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
有问题就template,多快乐
还有: