列表渲染二

v-for 与对象

使用v-for也可以用来遍历对象里的属性。使用方式: v-for (value, key, index)。value:对象属性的值，key对象的键，index：位置索引。

<div class="item" v-for="(value, key, index) in dataObj" :key="key">
    {{ key }}： {{ value }} -- {{ index }}
</div>

const dataObj = reactive({ 
    name: 'xiaomi',
    price: 4999,
    goodsId: '12'
})

最终的渲染结果:

<template> 上的 v-for

同v-if，如果要循环多个元素可以使用<template>标签包裹。

<div>
  <template v-for="item in items">
    <div> ... </div>
    <div> ... </div>
  </template>
</div>

v-if与v-for

v-for的优先级低于v-if，这样v-if无法访问v-for内的变量当作条件。

<!--
 这会抛出一个错误，因为先执行的v-if，
此时v-for内的变量还没出现所以访问不到name属性
-->
<div v-for="item in datalist" v-if="item.name">
  {{item.price}}
<div/>