易语言资源网 - 做最全的易语言资源下载社区
【精易招聘】UniApp开发工程师 精易论坛授权登录

【零基础学会uniapp】第四课:列表渲染   [复制链接]

    2021-10-20 09:08:53
    uni-app
    易语言资源网
    165 次浏览

4、列表渲染 v-for

a. 基于数组的循环

v-for 指令可以实现基于一个数组、对象来渲染一个列表。

v-for 指令需要使用 item[,index] in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

  • 第一个参数 item :是被迭代的数组元素的别名。

  • 第二个参数 index:即当前项的索引 ,是可选的。

<template>
   <view>
       <view v-for="item,index in array">
           {{index}} : {{item}}
       </view>
   </view>
</template>
<script>
   export default {
       data() {
           return {
               array: [ 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 ],
          }
      }
  }
</script>
  • 其中,array中的元素可以是对象类型:

  • 针对对象类型,item表示的就是当前循环的对象

<template>
   <view>
       <view v-for="item,index in array">
          序号:{{index}} ,姓名:{{item.name}} 分数:{{item.score}}
       </view>
   </view>
</template>

<script>
   export default {
       data() {
           return {
               array: [ {
                   name: "小强",
                   score: 98.5
              }, {
                   name: "小李",
                   score: 96
              }, {
                   name: "小张",
                   score: 97.5
              } ],
          }
      }
  }
</script>
b.基于对象的循环

在 v-for 里使用对象

你也可以用 v-for 来遍历一个对象的 属性

语法:v-for="(value, name, index) in object"

  • 第一个参数 value 是被迭代的对象元素的属性值。

  • 第二个参数 name 是被迭代的对象元素的属性名 。

  • 第三个参数index是当前的索引。

<template>
   <view>
  <view v-for="(value, name, index) in object">
      {{ index }}. {{ name }} : {{ value }}
      </view>
       </view>
</template>
<script>
   export default {
       data() {
           return {
               object: {
               title: '第四课:列表渲染 v-for',
               type: '视频教程',
          }
          }
      }
  }
</script>
列表渲染分组

类似于 v-if,你也可以利用带有 v-fortemplate 来循环渲染一段包含多个元素的内容。比如:

<template v-for="(value, name, index) in object">
   <text style="font-size: 20px;">序号:{{index}},</text>
   <text style="font-size: 20px;">属性名:{{name}},</text>
   <text style="font-size: 20px;">属性值:{{index}}</text>
</template>

使用template和使用view的区别?

使用template时,外部将没有任何元素进行包裹。

如果使用view标签,那么将会有一层view标签。

具体可以通过使用F12探测窗口元素进行查看。

key

当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 :key 来指定列表中项目的唯一的标识符。

:key 的值需要提供一个唯一的id,不能是index

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

如不提供 :key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

<template>
   <view>
       <view v-for="(item, index) in array">
           {{item.name}} 分数:{{item.score}}
           <checkbox></checkbox>
       </view>
       <button @click="onclicked">删除第二个元素</button>
   </view>
</template>
<script>
   export default {
       data() {
           return {
               array: [ {
                   id: 0,
                   name: "小强",
                   score: 98.5
              }, {
                   id: 1,
                   name: "小李",
                   score: 96
              }, {
                   id: 2,
                   name: "小张",
                   score: 97.5
              } ],
          }
      },
       methods: {
           onclicked() {
               this.array.splice( 1, 1 );//删除数组中的 第 2 个元素。
          }
      }
  }
</script>
注意事项
  • 在H5平台 使用 v-for 循环整数时和其他平台存在差异,如 v-for="(item, index) in 10" 中,在H5平台 item 从 1 开始,其他平台 item 从 0 开始,可使用第二个参数 index 来保持一致。

  • 在非H5平台 循环对象时不支持第三个参数,如 v-for="(value, name, index) in object" 中,index 参数是不支持的。

  • 小程序端数据为差量更新方式,由于小程序不支持删除对象属性,使用的设置值为 null 的方式替代,导致遍历时可能出现不符合预期的情况,需要自行过滤一下值为 null 的数据(相关反馈)。

在组件上使用 v-for

在自定义组件上,你可以像在任何普通元素上一样使用 v-for

<my-component v-for="item in items" :key="item.id"></my-component>

当在组件上使用 v-for 时,key是必须的。


本课引用链接:

https://uniapp.dcloud.io/vue-basics?id=listrendering

https://www.w3school.com.cn/js/js_loop_for.asp - for/in 循环 部分

@ 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群:326576256





点我下载 (已有 4 次下载)

[错误报告]   上一篇:更改 输入框 默认确认按钮 内容...     下一篇:【VIP视频解析】二次视频解析接口整合+...