Vue表格数据实例

下面是使用vue来处理的表格数据实例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <table>
            <tr>
                <td>
                    ID
                td>
                <td>
                    圈主ID
                td>
                <td>
                    耗卡
                td>
                <td>
                    开房数
                td>
            tr>
            <tr v-for="item in items">
                <td>
                    {{item.id}}
                td>
                <td>
                    {{item.hid}}
                td>
                <td>
                    {{item.haoka}}
                td>
                <td>
                    {{item.kaifa}}
                td>
            tr>       
        table>
    div>

body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {id: "1" , hid: "123" , haoka: "12414" , kaifa: "454454"},
                {id: "1" , hid: "123" , haoka: "12414" , kaifa: "454454"},
                {id: "1" , hid: "123" , haoka: "12414" , kaifa: "454454"},
                {id: "1" , hid: "123" , haoka: "12414" , kaifa: "454454"},
            ]
        }
    })
script>
html>

你可能感兴趣的:(前端,vue,vue自学手册)