Vue表格数据实例

下面是使用vue来处理的表格数据实例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><table><tr><td>

liukai6

3702人浏览 · 2018-03-22 10:29:56

liukai6 · 2018-03-22 10:29:56 发布

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</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/vue@2.5.16/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 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^