问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HTML导入vue.js后v-for使用时不能显示假数据

头像
天际无痕
    334
    头像
    夕水
      5.4k22153
      新手上路，请多包涵
      <!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style type="text/css">
        .grid{
            margin: auto;
            width: 500px;
            text-align: center;
        }
        .grid table {
            width: 100%
            border-collapse : collapse /*这里的","还一直报错*/

        }
        .grid th,td{
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }
        .grid th {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="#app">
        <div class="grid">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr : key='item.id' v-for='item in books'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>
                            <a href="">修改</a>
                            <span>|</span>
                            <a href="">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="./lib/vue.js"></script>
    <script type="text/javascript">
        /*

        */
        var app = new Vue({
            el:'#app',
            data: {
                books:[{
                    id: 1,
                    name: '东',
                    date: ''
                },{
                    id: 2,
                    name: '西',
                    date: ''
                },{
                    id: 3,
                    name: '南',
                    date: ''
                },{
                    id: 4,
                    name: '北',
                    date: ''
                }]
            }
        });
    </script>
</body>
</html>
      vue.js
      阅读 3.3k
      3 个回答
      得票最新
      头像
      夕水
        5.4k22153
        ✓ 已被采纳
        头像
        zengkan
          1.2k2622

          你的 html 里面有两个地方粗心写错了：

          1. <div id="#app">应该是<div id="app"> 多了一个 #
          2. <tr : key='item.id' v-for='item in books'> 应该是 <tr :key='item.id' v-for='item in books'> key 前面多了空格
          头像
          moye
            1.3k1818

            前面二位大佬已经说了，个人建议看console控制台报的错。第一很明显#app没有找到。可以定位到#app,然后丁文到这来多了一个# 改为<div id="app">。第二就是: key这里多了一个空格啊。

            查看全部 3 个回答
            推荐问题