v-for制作一个简单表格

最新推荐文章于 2024-06-14 11:07:57 发布

XingFang666

最新推荐文章于 2024-06-14 11:07:57 发布

阅读量3.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue2学习常用指令

本文链接：https://blog.youkuaiyun.com/xfmuchengxue/article/details/80727489

vue2学习常用指令专栏收录该内容

0 篇文章

订阅专栏

本文通过实例演示如何利用Vue.js中的v-for指令来创建动态表格。示例中包含姓名、年龄和性别三个字段，并展示了如何为数组中的每个对象生成一行表格内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for练习做一个表格</title>
    <style>
        table{
            width: 600px;
            border:2px solid orangered;
            text-align: center;
        }
        thead{
            background-color: orangered;
            color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for='p in persons'>
                    <td>{{p.name}}</td>
                    <td>{{p.age}}</td>
                    <td>{{p.sex}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data () {
                return { 
                    persons:[
                        {name:'张三',age:'18',sex:'男'},
                        {name:'王五',age:'19',sex:'男'},
                        {name:'小红',age:'20',sex:'女'},
                        {name:'小明',age:'27',sex:'男'},
                    ]
                }
            }
        })
    </script>
</body>
</html>