vue如何渲染一维数组

吃半个馒头
  • 1.4k
<!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>
回复
阅读 2.6k
6 个回答

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

<div id="app">
    <ol>
        <li v-for="site in sites">{{site}}</li>
    </ol>
</div>
<li v-for="site in sites">
  {{ site}}
</li>
// 每一项就是教育、文艺...
<li v-for="site in sites">
  {{ site }}
</li>

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

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

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

下面这样就可以渲染出来你的数组了,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>
宣传栏