千峰商城-springboot项目搭建-26-vue列表渲染

将集合数据以表格、列表形式显示。
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <ul>
                <li v-for="c in categories">
                    <a :href="'query?cid=' + c.cid">{{c.cname}}</a>
                </li>
            </ul>
            
            <table class="table table-bordered">
                <tr>
                    <th>学号</th>
                    <th>照片</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
                <tr v-for="s,index in stus" :id="'tr'+s.stuNum">
                    <td>{{s.stuNum}}</td>
                    <td>
                        <img height="30" :src="s.stuImg" />
                    </td>
                    <td>{{s.stuName}}</td>
                    <td>
                    <!--    {{s.stuGender=='M'?'男':'女'}}-->
                        <img v-if="s.stuGender=='M'" src="img/m.bmp" />
                        <img v-else src="img/f.bmp" />
                    </td>
                    <td>{{s.stuAge}}</td>
                    <td>
                        <a class="btn btn-danger btn-xs" :href="'stu/delete?cid=' +s.stuNum">删除</a>
                        <a class="btn btn-success btn-xs" :href="'stu/update?cid=' +s.stuNum">修改</a>
                    </td>
                </tr>
            </table>
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    categories:[
                    {
                        cid:1,
                        cname:"华为"
                    },{
                        cid:2,
                        cname:"小米"
                    },{
                        cid:3,
                        cname:"oppo"
                    },{
                        cid:4,
                        cname:"vivo"
                    }
                    ],
                    stus:[
                    {
                        stuNum:"10010",
                        stuImg:"img/1.jpeg",
                        stuName:"Tom",
                        stuGender:"M",
                        stuAge:20
                    },{
                        stuNum:"10011",
                        stuImg:"img/2.jpg",
                        stuName:"lilei",
                        stuGender:"M",
                        stuAge:21
                    },{
                        stuNum:"10012",
                        stuImg:"img/3.jpg",
                        stuName:"lucy",
                        stuGender:"F",
                        stuAge:26
                    },{
                        stuNum:"10013",
                        stuImg:"img/4.jpg",
                        stuName:"polly",
                        stuGender:"F",
                        stuAge:20
                    }
                    ]
                }
            });
        </script>
        
    </body>
</html>

 

 

 

 
posted @ 2022-07-08 17:04  临易  阅读(31)  评论(0)  编辑  收藏  举报