诗岑
2020-08-12 19:14
采纳率: 82.8%
浏览 123

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>
    
    点赞 打赏 评论
  • zqbnqsdsmd 2020-08-13 08:11
    点赞 打赏 评论
  • Kevin.Y.K 2020-08-13 09:10

    代码中有两处div的id都是app,还有id命名不要加空格“example 2“,必要的代码规范还是要遵守的

    点赞 打赏 评论

相关推荐 更多相似问题