• 列表渲染


    用 v-for 把一个数组对应为一组元素

    我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。

    <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' }
        ]
      }
    })

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

    <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' }
        ]
      }
    })

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

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

    在 v-for 里使用对象

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

    <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'
        }
      }
    })

    你也可以提供第二个的参数为 property 名称 (也就是键名):

    <div v-for="(value, name) in object">
      {{ name }}: {{ value }}
    </div>

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

    <div v-for="(value, name, index) in object">
      {{ index }}. {{ name }}: {{ value }}
    </div>

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

    在 v-for 里使用值范围

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

    <div>
      <span v-for="n in 10">{{ n }} </span>
    </div>

    结果: 1 2 3 4 5 6 7 8 9 10

    在 <template> 上使用 v-for

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

    <ul>
      <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider" role="presentation"></li>
      </template>
    </ul>

    v-for 与 v-if 一同使用

    当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时,这种优先级的机制会十分有用,如下:

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

    上面的代码将只渲染未完成的 todo。

    而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。如:

    <ul v-if="todos.length">
      <li v-for="todo in todos">
        {{ todo }}
      </li>
    </ul>
    <p v-else>No todos left!</p>

        此处的v-for和v-if的配合使用,有点类似于筛选,用v-if来筛选出不需要渲染的部分

    在组件上使用 v-for

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

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

    2.2.0+ 的版本里,当在组件上使用 v-for 时,key 现在是必须的。

    然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要使用 prop:

    <my-component
      v-for="(item, index) in items"
      v-bind:item="item"
      v-bind:index="index"
      v-bind:key="item.id"
    ></my-component>

    不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

  • 相关阅读:
    0593. Valid Square (M)
    0832. Flipping an Image (E)
    1026. Maximum Difference Between Node and Ancestor (M)
    0563. Binary Tree Tilt (E)
    0445. Add Two Numbers II (M)
    1283. Find the Smallest Divisor Given a Threshold (M)
    C Primer Plus note9
    C Primer Plus note8
    C Primer Plus note7
    C Primer Plus note6
  • 原文地址:https://www.cnblogs.com/Ashton-ldb/p/11423543.html
Copyright © 2020-2023  润新知