问答博客资讯标签用户活动
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如何渲染一维数组

头像
吃半个馒头
    1.4k17185217
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites:["教育", "文艺", "青春", "生活", "人文社科", "经管", "科技", "电子书"];
  }
})
</script>
</body>
</html>
    javascriptvue.js
    阅读 4.9k
    6 个回答
    得票最新
    头像
    寒青
      10.4k2619

      题主为什么会问这种问题？html模板里面的name并不存在，所以遍历一定报错，检查一下调试窗就很清楚了。site代表分别取得sites数组里面的每一项。附上问题答案。

      <div id="app">
    <ol>
        <li v-for="site in sites">{{site}}</li>
    </ol>
</div>
      头像
      阚巍巍
        1644
        {{ site }}
        头像
        染陌同学
          91057
          <li v-for="site in sites">
  {{ site}}
</li>
          头像
          若川
            7k32431
            // 每一项就是教育、文艺...
<li v-for="site in sites">
  {{ site }}
</li>

            建议多看看官方文档。Vue 文档：列表循环

            头像
            家木子猿
              1621719

              这里的就是数组、没有json对象、直接写就就可以

              <div id="app">
  <ol>
    <li v-for="site in sites">
      {{site}}
    </li>
  </ol>
</div>
              头像
              linong
                29.2k1266133

                下面这样就可以渲染出来你的数组了，v-for他对应的是js里面 for of 所以site就是你的value。

                <div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site}}
    </li>
  </ol>
</div>

                如果想要key,index其实就是你的key，数组下标是0开始，key也就是0开始，我们给他都+1

                <li v-for="(site,index) in sites">
  {{index+1}}.{{site}}
</li>
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题