诗岑 2020-08-12 19:14 采纳率: 93%
浏览 166
已采纳

HTML+JavaScript数组没有显示

如题,在HTML和JavaScript中设置了数组,但是在网页中并没有显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vueapp</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
<script src="vueapp.js"></script>
</head>

<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<!--arrays--->
<div id="app">
<ul id="example 2">
<li v-for="item in items">
{{parentMessage}}-{{$index}}-{{item.message}}
</li>
</ul>
</div>
</body>
<script src="vueapp.js"></script>
</html>

// JavaScript Document
new Vue({
    el:'#app',
    data:{
        todos:[
        {text:'learn javascript'},
        {text:'learn vue.js'},
        {text:'build something awesome'}
        ]
    }
})
var example2=new Vue({
    el:'#example 2',
    data:{
        parentMessage:'official website',
        items:[
        {message:'www.runoob.com'},
        {message:'www.runoob.com'},
        ]
    }
})

  • 写回答

3条回答 默认 最新

  • jingluan666 2020-08-13 08:17
    关注

    把id="example 2"中的空格去掉(引用的地方一样),id中不要使用空格,要么使用下划线

    另外,index使用是不是该这样:

    <li v-for="(item,index) in items">
    {{parentMessage}}-{{index}}-{{item.message}}
    </li>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 欧拉系统opt目录空间使用100%
  • ¥15 ul做导航栏格式不对怎么改?
  • ¥20 用户端如何上传图片到服务器和数据库里
  • ¥15 现在研究生在烦开题,看了一些文献,但不知道自己要做什么,求指导。
  • ¥30 vivado封装时总是显示缺少一个dcp文件
  • ¥100 pxe uefi启动 tinycore
  • ¥15 我pycharm运行jupyter时出现Jupyter server process exited with code 1,然后打开cmd显示如下
  • ¥15 可否使用carsim-simulink进行四轮独立转向汽车的联合仿真,实现四轮独立转向汽车原地旋转、斜向形式、横移等动作,如果可以的话在carsim中如何进行相应设置
  • ¥15 Caché 2016 在Java环境通过jdbc 执行sql报Parameter list mismatch错误,但是同样的sql使用连接工具可以查询出数据
  • ¥15 疾病的获得与年龄是否有关