问答博客资讯标签用户活动
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

vue初学者，如何循环输出

头像
chaihongjun
    302679121
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <li v-for="site in sites">
                <a v-bind:href="site.url">{{site.name }}</a>
            </li>
        </ol>
    </div>
    <script>
   var vm= new Vue({
        el: '#app',
        data: {
            sites: [
                [{ name: 'baidu' }, { url: 'www.baidu.com' }],
                [{ name: '163' }, { url: 'www.163.com' }]
            ]
        }
    })
    </script>
</body>

</html>

    目的是想输出带URL的列表项，结果数据没出来。。。

    图片描述

    javascriptvue.js
    阅读 3k
    3 个回答
    得票最新
    头像
    jackple
      83522945
      ✓ 已被采纳
      sites: [
                { name: 'baidu', url: 'www.baidu.com' },
                { name: '163', url: 'www.163.com' }
            ]
      头像
      双门人走
        46511016

        数据格式写错的了 改成这样
        `sites: [

             {
        name: 'baidu',
        url: 'www.baidu.com',
    },
    {
        name: '163',
        url: 'www.163.com',
    },
],`
你这个写法是多维数组了，而且应该把url 和name 放到一个对象里，这用比较好起到对应，如果坚持你这种数据格式 可以写成这样
`
<div id="app">
    <ol>
        <li v-for="(site,index) in sites">
            <span  v-for="(key,index) in site">
                {{key.name}}
                <a v-bind:href="'http:'+key.url">{{key.url}}</a>
            </span>
        </li>
    </ol>
</div>
<script>
    var vm = new window.Vue({
        el: '#app',
        data: {
            sites: [
                [{ name: 'baidu' }, { url: 'www.baidu.com' }],
                [{ name: '163' }, { url: 'www.163.com' }]
            ],
        },
    });
    vm;`
        头像
        邱权武
          3610

          你这个明显是数组和对象不过关，应该改成这样，还有就是你的网址有问题，你这样不加http：//会被解析为相对路径

          <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <li v-for="site in sites">
                <a v-bind:href="site.url">{{site.name }}</a>
            </li>
        </ol>
    </div>
    <script>
   var vm= new Vue({
        el: '#app',
        data: {
            sites: [
                { name: 'baidu',url: 'http://www.baidu.com' },
                { name: '163' ,url: 'http://www.163.com' }
            ]
        }
    })
    </script>
</body>

</html>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题