vue 指令 v-for 遍历数组

最新推荐文章于 2023-07-10 21:46:09 发布

Claroja

最新推荐文章于 2023-07-10 21:46:09 发布

阅读量743

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/claroja/article/details/112702853

版权

vue 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

<body>
  <div id="app">
    <ul>
      <li v-for='item in arrNames'>{{item}}</li><!--遍历数组-->
      <li v-for='(item, index) in arrNames'>{{item + '---' + index}}</li><!--遍历数组,index是下标-->
      <li :key='item.id' v-for='(item, index) in objNames'><!--key的作用：帮助Vue区分不同的元素，从而提高性能-->
        <span>{{item.ename}}</span>
        <span>-----</span>
        <span>{{item.cname}}</span>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      循环结构-遍历数组
    */
    var vm = new Vue({
      el: '#app',
      data: {
        arrNames: ['wang', 'wei'],
        objNames: [{
          id: 1,
          ename: 'wang',
          cname: '王'
        },{
          id: 2,
          ename: 'wei',
          cname: '魏'
        }]
      }
    });
  </script>
</body>