循环小案例

最新推荐文章于 2024-06-14 11:01:38 发布

哎呦喂——code

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量134

点赞数

分类专栏：小功能、案例... 文章标签： javascript vue.js 前端 html

本文链接：https://blog.csdn.net/weixin_49406370/article/details/125316011

版权

小功能、案例... 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

例：

<body>
  <div id="box"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
  Vue.createApp({
    data() {
      return {
        list: ['你好','张三','杯子'],
        listA: ['蛋卷','草莓','西瓜']
      }
    },
    template:`
    <ul>
      <li  v-for='item of list'>{{item}}</li>
    </ul>
    <ul>
      <li  v-for='item in listA'>{{item}}</li>
    </ul>
    `
  }).mount('#box')
</script>

在这里插入图片描述

--------------循环小知识---------------
for in：一般用来遍历对象的属性名key （for…in语句以任意顺序迭代对象的可枚举属性。
for of ：一般用来遍历数组对象的元素值value （ for…of 语句遍历可迭代对象定义要迭代的数据。

--------------循环小知识---------------
map：return返回一个新数组，不会对原数组产生影响（相当于把原数组克隆一份，不影响原数组），不会对空数组进行检测，不会改变原始数组，可以进行链式操作。（改变数据值的时候可以使用map）
forEach：调用数组的每个元素，并将元素传递给回调函数，空数组不会执行回调函数，不能用break，会直接报错。（不改变数据的情况下，只用数据来做一些展示可以使用forEach）
map速度比forEach快些。