Vue里面的循环遍历

最新推荐文章于 2024-06-05 14:26:44 发布

新手小白请求出战！

最新推荐文章于 2024-06-05 14:26:44 发布

阅读量406

点赞数 1

分类专栏：前端笔记文章标签： javascript vue.js html5 es6

本文链接：https://blog.csdn.net/qq_41138726/article/details/109656761

版权

前端笔记专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1.v-for遍历数组时

<body>
    <div id="app">
        <!-- 在遍历过程中没有使用索引 -->
      <ul>
          <li v-for="item in names">{{item}}</li>
         
      </ul>
      <!-- 在遍历过程中加上索引值 -->
      <ul>
          <li v-for="(item,index) in names">
              {{index+1}},{{item}}
            </li>
      </ul>

    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
               names:['why','kobe','janes','curry']
            }
        })
    </script>
</body>

2.v-for遍历对象时

<body>
    <div id="app">
       <!--把个人信息显示出来 -->
       <!-- 第一种方法 -->
       <ul>
           <li>{{info.name}}</li>
           <li>{{info.age}}</li>
           <li>{{info.height}}</li>
           
       </ul>

       <!-- 第二种方式 -->
       <!-- 在遍历对象的过程中，如果只是获取一个值，那么获取到的只是value -->
       <ul>
           <li v-for="item in info">{{item}}</li>
       </ul>
        
       <!-- 第三种方式 -->
       <!-- 获取key和value （value,key,index）value更重要，所有把value放在前面 -->
       <ul>
        <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index+1}}</li>
    </ul>

    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
               info:{
                   name:'why',
                   age:18,
                   height:1.88
               }
            }
        })
    </script>
</body>

新手小白请求出战！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue里面的循环遍历

1.v-for遍历数组时<body> <div id="app">  <ul> <li v-for="item in names">{{item}}</li> </ul>  <ul>
复制链接

扫一扫

专栏目录