1-4.vue指令：v-for指令

最新推荐文章于 2024-04-20 03:11:56 发布

堵车了

最新推荐文章于 2024-04-20 03:11:56 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_45660035/article/details/110739625

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1-4.vue指令：v-for指令

v-for的作用

v-for是用来遍历，主要可以遍历我们常用的一下四个数据类型，number/string/array/object，
其中使用最多的是遍历array和object。

遍历number和string(不常用)

1.语法书写

<li v-for="item in data">{{item}}</li>

2.代码展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src='../js/vue.js'></script>
  <title>Document</title>
</head>

<body>
  <div id='app'>
    <ul>
      <!-- 遍历数字 -->
      <li v-for="item in aaa">{{item}}</li>

      <!-- 遍历字符串 -->
      <li v-for="item in bbb">{{item}}</li>
    </ul>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        aaa: 10,
        bbb: 'abc',
      }
    });
  </script>

</body>

</html>

3.结果展示

在这里插入图片描述

遍历数组array

1.语法书写

     <!-- 只获取值 -->
      <li v-for="item in aaa">{{item}}</li>
      <!-- 获取值和下标 -->
      <li v-for="(item, index) in aaa">{{item}}------{{index}}</li>

2.代码展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src='../js/vue.js'></script>
  <title>Document</title>
</head>

<body>
  <div id='app'>
    <ul>
      <!-- 只获取值 -->
      <li v-for="item in aaa">{{item}}</li>
    </ul>
    -------------------------------------------
    <ul>
      <!-- 获取值和下标 -->
      <li v-for="(item, index) in aaa">{{item}}------{{index}}</li>
    </ul>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        aaa: ["张三", "李四", "王五"]
      }
    });
  </script>

</body>

</html>

3.结果展示

在这里插入图片描述

遍历对象Object

1.语法书写

      <!-- 只获取值value -->
      <li v-for="val in person">{{val}}</li>
      <!-- 只获取值value和键key -->
      <li v-for="(val,key) in person">{{val}}-------{{key}}</li>
      <!-- 获取值value和键key和下标index -->
      <li v-for="(val,key,index) in person">{{val}}-------{{key}}--------{{index}}</li>

2.代码展示

<body>
  <div id='app'>
    <ul>
      <!-- 只获取值value -->
      <li v-for="val in person">{{val}}</li>
    </ul>
    -------------------------------------------
    <ul>
      <!-- 只获取值value和键key -->
      <li v-for="(val,key) in person">{{val}}-------{{key}}</li>
    </ul>
    -------------------------------------------
    <ul>
      <!-- 获取值value和键key和下标index -->
      <li v-for="(val,key,index) in person">{{val}}-------{{key}}--------{{index}}</li>
    </ul>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        person: {
          name: '张三',
          age: 18,
          sex: true
        }
      }
    });
  </script>

</body>

3.结果展示

在这里插入图片描述

堵车了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1-4.vue指令：v-for指令

1-4.vue指令：v-for指令v-for的作用v-for是用来遍历，主要可以遍历我们常用的一下四个数据类型，number/string/array/object，其中使用最多的是遍历array和object。遍历number和string(不常用)1.语法书写<li v-for="item in data">{{item}}</li>2.代码展示<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫