列表渲染

列表渲染免费看

11-10侠课岛    新上线 基础入门       

前端/前端/Vue入门教程 15     0     193

v-for指令的使用

Vue 中,我们可以使用 v-for 指令绑定数据到数组来渲染一个列表。

使用 v-for 指令需要以 item in items 形式的特殊语法来实现。其中 items 是源数据数组,item 是要在其上进行迭代的数组元素的别名。

示例:

例如假设有一组关于水果的数据,需要使用列表渲染页面,我们可以在 <li> 标签上绑定 v-for 指令:

<div>
    <ul id="array-rendering">
        <li v-for="fruit in fruits">
          {{fruit}}
        </li>
    </ul>
</div>
const app = Vue.createApp({
  data() {
    return {
      fruits:["苹果","西瓜","芒果"]
    }
  }
}).mount('#array-rendering')

我们可以在浏览器中看一下效果:

上述代码中 fruit in fruits 是使用 v-for 指令的语法,然后 fruits 就是data 中定义的数组名,而 fruit 是数组元素迭代的别名,也就是我们自定义的名字。

v-for 块中,我们可以访问所有父作用域的 propertyv-for 还支持一个可选的第二个参数,即当前项的索引。

示例:
<div>
    <ul id="array-rendering">
        <li v-for="(fruit, index) in fruits">
            {{fruit}}的索引:{{index}}
        </li>
    </ul>
</div>
const app = Vue.createApp({
  data() {
    return {
      fruits:["苹果","西瓜","芒果"]
    }
  }
}).mount('#array-rendering')

刷新浏览器,效果如下所示:

我们也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法:

<div v-for="item of items"></div>

在v-for里使用对象

我们也可以用 v-for 来遍历一个对象的 property

<ul id="app">
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>
Vue.createApp({
  data() {
    return {
      myObject: {
        title: 'Vue入门教程',
        author: '小飞侠',
        publishedAt: '2020-11-10'
      }
    }
  }
}).mount('#app')

在浏览器中的演示结果:

我们也可以提供第二个的参数为 property 名称 ,也就是键名 key

<ul id="app">
  <li v-for="(value, name) in myObject">
    {{ name }}: {{ value }}
  </li>
</ul>

或者还可以用第三个参数作为索引:

<ul id="app">
  <li v-for="(value, name, index) in myObject">
    {{ index }}. {{ name }}: {{ value }}
  </li>
</ul>

提示: 在遍历对象时,会按 Object.keys() 的结果遍历,但是不能保证它在不同 JavaScript 引擎下的结果都一致。

v-for迭代整数

v-for 也可以接受整数,在这种情况下,它会把模板重复对应次数。

示例:
<div id="app">
    <p v-for="num in 5">{{num}}</p>
</div>
Vue.createApp({}).mount('#app')

浏览器中演示效果:

v-for与v-if一起使用

提示:不推荐在同一元素上使用 v-ifv-for

v-forv-if 处于同一个节点时,v-if 的优先级比 v-for 更高,这意味着 v-if 将没有权限访问 v-for 里的变量:

<!-- 这将引发错误,因为实例上未定义属性item。 -->

<li v-for="item in items" v-if="!item.isComplete">
  {{ item }}
</li>

可以把 v-for 移动到 <template> 标签中来修正:

<template v-for="item in items">
  <li v-if="!item.isComplete">
    {{ item }}
  </li>
</template>

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

15

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?