20181126——Vue小实例v-for的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        #table{
            line-height: 40px;
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="table">
        <table border="1">
            <tr>
                <th>序号</th>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in dataList" :key="item.id">
                <td>{{item.index}}</td>
                <td>{{item.bookName}}</td>
                <td>{{item.author}}</td>
                <td>{{item.price}}</td>
                <td>{{item.active}}</td>
            </tr>
        </table>
    </div>
</div>
<script>

    var vm =new Vue({
        el:"#app",
        data (){
            return{
                dataList:[{
                    id:'0001',
                    index:1,
                    bookName:"红楼梦",
                    author:"曹雪芹",
                    price:32,
                    active:"删除"
                }, {
                    id:'0002',
                    index:2,
                    bookName:"水浒传",
                    author:"施耐庵",
                    price:30,
                    active:"删除"
                }, {
                    id:'0003',
                    index:3,
                    bookName:"三国演义",
                    author:"罗贯中",
                    price:32,
                    active:"删除"
                }, {
                    id:'0004',
                    index:4,
                    bookName:"西游记",
                    author:"吴承恩",
                    price:32,
                    active:"删除"
                }]
            }
        }
    })
</script>
</body>
</html>

随便复习一下html中的表格，table th tr td 标签

让表格居中，只需要在table标签中定义align属性为center就可以了

20181126——Vue小实例v-for的使用

猜你喜欢