03-学习笔记（HTML创建表格并通过for循环将数组内数据插入表格-vue）【新手上路，多多关照】

在webStorm中通过HTML创建表格，并用v-for循环将数组内数据插入表格（vue）

fwz123

2992人浏览 · 2022-12-01 23:05:00

fwz123 · 2022-12-01 23:05:00 发布

内容介绍：

在webStorm中通过HTML创建表格，并用v-for循环将数组内数据插入表格（vue）

内容根据B站coderwhy老师视频2019年coderwhy vue-vuejs从入门到精通教程进行记录，感谢coderwhy老师的讲解和分享

完成后的表格样式：

详细代码（创建表格可在菜鸟教程HTML 表格进行学习）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">    <!--引用的css样式，代码往下翻，使用时可以自己新建文件然后引用-->
</head>

<body>
<table id="app">
    <tr>
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
    </tr>
    <tr v-for="item in books"><!--v-for对books数组进行遍历-->
        <td>{{item.id}}</td><!--获取数组中的元素，并在表格中进行展示（item是数组中的一个对象）-->
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <td>{{item.price}}</td>
        <td>
            <button v-on:click="">-</button><!--这里只是将按钮放上去了，点击并不会任何触发事件-->
            {{item.count}}
            <button v-on:click="">+</button>
        </td>
        <td><button v-on:click="">移除</button></td>
    </tr>
</table>

<script src='../js/vue.js'></script>     <!--vuek框架引用目录-->
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'hello world!',
            books:[
                {
                    id:1,
                    name:'《算法导论》',
                    date:2006.9,
                    price:85.00,
                    count:1,
                },

                {
                    id:2,
                    name:'《UNIX编程》',
                    date:2006.11,
                    price:56.00,
                    count:1,
                },
               {
                    id:3,
                    name:'《编程珠玑》',
                    date:2009.11,
                    price:74.00,
                    count:1,
                },
               {
                    id:4,
                    name:'《代码大全》',
                    date:2007.11,
                    price:66.00,
                    count:1,
                },
            ]
        }
    })
</script>
</body>
</html>

css样式代码：

table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
}

th,td{/*组合选择器，表示th和td都使用该样式*/
    padding: 8px 16px;
    border:1px solid #e9e9e9;
    text-align: left;
}

th{
    background-color: #d0e4fe;
    color: #030000;
    font-weight: 600;
}

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}$/, //不连续的两位字母// /^