• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程08:v-for指令——循环渲染列表数据

    vue开发教程08:v-for指令——循环渲染列表数据

    作者: 分类:vue开发 点击: 103 次
    wordpress CMS主题:ssmay主题

      在vue项目开发过程中,如果一个数据是一个数组,我们要想让这个数组内的所有元素都能在前台页面中展示出来,我们就必须循环这个数组。vue就提供了这样一个循环指令——v-for指令,通过v-for指令,我们要以将一个数据数组循环输出。下面,一起来看看这个v-for指令的用法。

      案例数组:

      date(){

      return {

      list:[

      { title:'gaogao', content:'gaogaogaogagago' },
      { title:'ssmay', content:'ssmay theme' },
      { title:'wanlimm', content:'wanlimm wanlimm wanlimm' }

      ]

      }

      }

      案例1:直接通过v-for循环出list数组数据。

      <div v-for="item in list">
      {{item.title}} -- {{item.content}}
      </div>

      输出结果:

      gaogao -- gaogaogaogagago
      ssmay -- ssmay theme
      wanlimm -- wanlimm wanlimm wanlimm

      案例2:与v-if指令结合使用。

      <div v-for="(item,key) in list" v-if="key==2">
      {{item.title}} -- {{item.content}}
      </div>

      这里的key代码表示每次循环的序列号,从0次开始,key==2,即表示第三次循环,获取的是list数组的第三个元素,即:{ title:'wanlimm', content:'wanlimm wanlimm wanlimm' },所以,输出结果如下:

      wanlimm -- wanlimm wanlimm wanlimm

      案例3:结合绑定属性class

      <div v-for="(item,key) in list" :class="{red:key==0,blue:key==2}">
      {{item.title}} -- {{item.content}}
      </div>

      添加样式:

      <style >
      .red{ color:red }
      .blue{ color:blue }

      </style>

      输出结果如下图:

      vue开发教程08:v-for指令——循环渲染列表数据

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809226970.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.