Vue_v-for 

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/12/ 10:43-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="container">
        {{code}} <br>
        从vm中获取的数据为 {{str}}
        {{stu.stuNum}}<br>
        {{stu.stuName}}<br>
        {{stu.stuGender}}<br>
        <!-- v-if条件 -->
        <!-- v-if可以直接从 data 中取值 -->
        <label v-if="stu.stuGender == 'M' ">男</label><br>
        <label v-if="stu.stuGender == 'F' ">女</label>

        <table border="1" cellspacing="0" width="400">
            <tr>
                <th>序号</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr v-for="s, index in stus">
                <td>{{index + 1}}</td>
                <td>{{s.stuNum}}</td>
                <td>{{s.stuName}}</td>
                <td>
                    <label v-if="s.stuGender == 'M'">男</label>
                    <label v-if="s.stuGender == 'F'">女</label>
                </td>
                <td>{{s.stuAge}}</td>
            </tr>
        </table>


    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#container', // el 和 html绑定
            data: { // data又是一个 json; data代表一个数据结构; 里面可以放数据; 可以理解为 map
                code: 101,
                str: "从前有座山",
                stu: {
                    stuNum: "100001",
                    stuName: "张三",
                    stuGender: "M",
                    stuAge: 20
                },
                stus: [
                    {
                        stuNum: "100001",
                        stuName: "张大三",
                        stuGender: "M",
                        stuAge: 23
                    },
                    {
                        stuNum: "100002",
                        stuName: "张中三",
                        stuGender: "M",
                        stuAge: 22
                    },
                    {
                        stuNum: "100003",
                        stuName: "张小三",
                        stuGender: "F",
                        stuAge: 20
                    }
                ]
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

现在是将 数据 渲染到 页面中
那么问题来了
如何将 数据 渲染到 标签的属性中呢, 看下一篇博客

cellspacing: 细胞间距, 单元格间的距离

posted on 2022-08-12 14:47  beyondx  阅读(14)  评论(0)  编辑  收藏  举报

导航