• vue.js中如何使用v-for循环输出表格
  • 发布于 2个月前
  • 135 热度
    0 评论
  • 华鑫
  • 0 粉丝 8 篇博客
  •   

业务场景:

我现在有一个用户信息列表,如下图,表里有用户ID,姓名,城市等属性,这些信息是从后台数据库抓取的,现在需要把这些数据在前台以如下方式显示出来,这个如果用Vue.js来做输出该如何实现呢?

Vue.js的实现方式:

1.用ajax方式从后台取json格式的数据,这个具体这边就不写了,我这边为了演示vue.js的v-for语法的使用,这里的数据我直接用写好的数组代替。

2.用Vue.js的v-for循环语句把内容输出

具体代码如下:


<html>
<head>
<title>Hello Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<table id="tb-UserInfo">
    <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>性别</th>
        <th>城市</th>
    </tr>
    <tr v-for="user in userList">
        <td>{{user.ID}}</td>
        <td>{{user.Name}}</td>
        <td>{{user.Gender}}</td>
        <td>{{user.City}}</td>
    </tr>

</table>
<script>
    var app = new Vue({
        el: '#tb-UserInfo',
        data: {
            userList: [
                { ID: '1', Name: '张三', Gender: '男', City: '上海' },
                { ID: '2', Name: '李四', Gender: '男', City: '广州' },
                { ID: '3', Name: '韩梅梅', Gender: '女', City: '北京' },
                { ID: '4', Name: '王五', Gender: '男', City: '深圳' },
                { ID: '5', Name: '李宁', Gender: '男', City: '杭州' }
            ]
        }
    })
</script>
</body>
</html>


用户评论