zoukankan      html  css  js  c++  java
  • vue学习笔记-列表渲染

    <ul id="example-1">
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </ul>
    var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
    效果:
    Foo
    Bar


    <ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) 效果: Parent-0-Foo Parent-1-Bar

    遍历对象的所有属性

    <ul id="v-for-object" class="demo">
      <li v-for="value in object">
        {{ value }}
      </li>
    </ul>
    new Vue({
      el: '#v-for-object',
      data: {
        object: {
          title: 'How to do lists in Vue',
          author: 'Jane Doe',
          publishedAt: '2016-04-10'
        }
      }
    })
    
    结果:
    How to do lists in Vue
    Jane Doe
    2016-04-10

    三个参数作为索引:

    <div v-for="(value, name, index) in object">
      {{ index }}. {{ name }}: {{ value }}
    </div>
    
    结果:
    0.title: 'How to do lists in Vue',
    1.author: 'Jane Doe',
    2.publishedAt: '2016-04-10'
     
  • 相关阅读:
    gradle项目与maven项目互转
    GET和POST两种基本请求方法的区别
    gradle项目打war和jar包
    maven项目打war和jar
    winsw打包jar
    前端
    CentOS
    Vue
    Spring
    Vue
  • 原文地址:https://www.cnblogs.com/xqxacm/p/12323163.html
Copyright © 2011-2022 走看看