Vue.js基础-04-循环语句（遍历数组、迭代对象属性、遍历数组范围）

已于 2022-11-19 00:02:45 修改
阅读量708 收藏 3
点赞数 1
分类专栏： # vue框架学习 文章标签： vue.js 前端 javascript 循环语句 for
于 2022-05-16 22:42:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingzuo_1840/article/details/124756182
版权

文章目录

1. 遍历数组

1.1 < li > 标签中使用

语法示例

<li v-for="site in sites">{{ site.name }} : {{site.attack}}</li>

完整示例

  • 代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CROW SONG</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ol>
        <li v-for="site in sites">{{ site.name }} : {{site.attack}}</li>
      </ol>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          sites: [
            { name: "关羽", attack: 95 },
            { name: "张飞", attack: 90 },
            { name: "赵云", attack: 97 },
            { name: "马超", attack: 92 },
            { name: "黄忠", attack: 88 },
          ],
        },
      });
    </script>
  </body>
</html>
  • 打印结果

在这里插入图片描述

1.2 模板中使用

语法示例

      <ul>
        <template v-for="site in sites">
          <li > xxxxxxx </li>
        </template>
      </ul>

完整示例

  • 代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CROW SONG</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <template v-for="site in sites">
          <li >{{ site.name }} : {{site.attack}}</li>
          <li>====================</li>
        </template>
      </ul>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          sites: [
            { name: "关羽", attack: 95 },
            { name: "张飞", attack: 90 },
            { name: "赵云", attack: 97 },
            { name: "马超", attack: 92 },
            { name: "黄忠", attack: 88 },
          ],
        },
      });
    </script>
  </body>
</html>
  • 输出
    在这里插入图片描述

2. 迭代对象属性

对象有三个值，按顺序一次是：value，key，index。
我们用以下示例测试：

2.1 迭代第一个参数（值）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW SONG</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="info in object">
        {{ info }}
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        object: {
          name: '关羽',
          belong: '蜀',
          attack: 98
        }
      }
    })
  </script>
</body>

</html>
  • 输出
    在这里插入图片描述

2.2 迭代第二个参数（键名）

  <div id="app">
    <ul>
      <li v-for="(value,key) in object">
        {{ key }} : {{value}}
      </li>
    </ul>
  </div>
  • 显示结果
    在这里插入图片描述

2.3 第三个参数（索引值）

  <div id="app">
    <ul>
      <li v-for="(value,key,index) in object">
       {{index}} : {{ key }} : {{value}}
      </li>
    </ul>
  </div>

在这里插入图片描述

3. 遍历整数范围

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="n in 8">
        {{ n }}
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>

</html>
  • 结果输出
    在这里插入图片描述

image.png

玄德公笔记
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue如何遍历包含数组的对象
qq_43575827的博客
10-22 4241
最近写项目遍历数组内对象的时候含有数组，那么如何拿到数组中对象的值呢？ 我们来看一下： items: [ { id: 1, name: "实力档口", shop: [ { name: "小丫头服饰" }, { name: "jds" }, { name...
js、vue前端常用遍历方法
m0_46567190的博客
05-11 1144
前端常用遍历方法
vue中数组常用的六种循环方法、VUE中list的各种方法和运用
最新发布
zlfjavahome的专栏
06-05 1235
简单记录一下，常用的六种数组循环的方法，分别是for()，map()，forEach()，filter ()，every()，some();
Vue前端js循环遍历数组八种方法总结最新
即使再小的舟,也能远航
01-08 2764
【代码】Vue前端js循环遍历数组八种方法总结最新。
vue_使用v-for遍历对象属性
u012632105的博客
01-11 2215
vue_使用v-for遍历对象属性
vue使用js遍历数组和对象
xc9711的博客
04-26 1万+
前言 在vue中，遍历数组和对象的方式略有不同，不能完全以数组或对象的遍历方式给对方使用并获取数据。为了记录以及以后方便查看，现在对其进行整理。 数组遍历 以数组 array = [1,2,3,4,5] 为例 数组的遍历有以下几种 获取数组的长度进行遍历 for (let i = 0; i<array.length;i++) { Console.log("遍历后的数据",array[i]); } 使用foreach遍历 array.foreach((index) => { Co
vue中遍历对象
zyz00000000的博客
12-06 2万+
vue中遍历对象的方法就是JavaScript的方法，有多种方法： 第一种：in vue中在计算属性中，定义一个函数letters，因为要把letters用作数组，所以在letters函数中，先申明了letters = [ ] 通过in遍历cities对象，将对象的属性push到letters中。 cities的结构： ...
Vue.js常用指令汇总（v-if、v-for等）
10-21
Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的指令来简化DOM操作。本文将详细介绍Vue.js中的几个常用指令：v-if、v-for、v-show、v-bind和v-on。 1. **v-if** - 条件渲染指令，用于根据表达式的布尔...
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
接下来是循环语句，Vue.js提供`v-for`指令用于遍历数组或对象。 1. 简单的`v-for`示例遍历`sites`数组并显示每个对象的`name`属性。 2. 在模板中使用`v-for`允许在循环内部创建更复杂的结构，如在每个`site`后面...
vue面试题整理资料全
03-25
- **v-for**：用于迭代数组或对象，提供key属性以优化遍历。 6. **组件通信** - **props**：父组件向子组件传递数据。 - **事件总线（Event Bus）**：非父子组件间的通信，利用自定义事件和$emit/$on方法。 - *...
练习代码1-模板语法&内置指令
12-19
3. v-for：遍历数组或对象，每次迭代创建一个单独的实例。 4. v-on：绑定事件监听器，支持修饰符如`.stop`（阻止冒泡）、`.prevent`（阻止默认行为）等。 5. v-bind：动态绑定属性，包括元素属性、组件prop等。 6...
vue中的循环对象属性和属性值用法
10-14
主要介绍了vue中的循环对象属性和属性值用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
code-snippets:我发现随机代码段和示例很有用
04-05
ES6的`for...of`循环适用于遍历可迭代对象，如数组。 5. 数组操作：JavaScript的数组方法，如`map()`、`filter()`、`reduce()`和`forEach()`，提供了强大的数据处理能力。 6. 对象操作：JavaScript的对象允许通过...
vue循环 数组对象 和 对象
hyupeng1006的博客
12-14 2万+
在标签中v-for循环 1.循环数组对象列表（一般后台返回的形式） 2.循环对象(3个参数【有序】：value,key,index)
vuejs的几种遍历方式
qq_40272503的博客
01-28 2957
###vuejs中的几种遍历 注意：this是指向，只代表要被遍历的数组 1.普通for遍历 for(let i=0;i<this.books.length;i++){ allPrice += this.books[i].price * this.books[i].num } 2.表达式in遍历 (i值只是角标) for(let i in this.books){ console.log(this.books[i].p...
vue v-for 循环对象
cofecode的博客
11-09 5万+
vue也是可以循环对象的。例子如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <p v-for="(val, key, index) in list">{{key}}--{
Vue——基础(对象、属性样式操作、条件、循环、事件、绑定)
HMMHMH的博客
10-08 2204
目录vue对象vue操作属性vue操作样式三元运算条件渲染循环语句click事件双向绑定数据 vue对象 1.创建： new Vue({ … }) 2.属性： 属性 描述 el 需要管理的区域 data 用来显示在页面的数据 computed 计算属性 watch 监听属性 methods 方法属性 vue操作属性 1.格式： v-bind:属性=”data”...
vue的v-for循环普通数组、对象数组、对象、数字
热门推荐
欧阳小白闯天涯
07-20 5万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> ...
vue中循环遍历出数组对象中的某个属性值组成新的数组
07-14
在Vue中，你可以使用`v-for`指令来循环遍历数组对象，并使用对象的属性值组成新的数组。下面是一个示例： ```html <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' } ] }; } }; </script> ``` 在上面的示例中，我们使用`v-for`指令来循环遍历`items`数组，并使用`item.name`来获取每个对象的名称属性值。你可以根据你的需求修改代码来获取特定的属性值，并将它们组成新的数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玄德公笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值