美文网首页学习笔记
Vue学习笔记之列表渲染

Vue学习笔记之列表渲染

作者: aitality | 来源:发表于2018-06-20 17:47 被阅读0次

    上一篇:Vue学习笔记之条件渲染

    v-for

    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 作为分隔符。

    v-for对一个对象的属性迭代

    <div v-for="(value, key, index) in object">
      {{ index }}. {{ key }}: {{ value }}
    </div>
    
    new Vue({
      el: '#v-for-object',
      data: {
        object: {
          firstName: 'John',
          lastName: 'Doe',
          age: 30
        }
      }
    })
    

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

    key

    <div v-for="item in items" v-bind:key="item.id">
      <!-- 内容 -->
    </div>
    

    建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
    因为它是 Vue 识别节点的一个通用机制,key并不与 v-for 特别关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。

    数组更新检测

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
    1.当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
    2.当你修改数组的长度时,例如:vm.items.length = newLength

    显示过滤/排序结果

    <li v-for="n in evenNumbers">{{ n }}</li>
    data: {
      numbers: [ 1, 2, 3, 4, 5 ]
    },
    computed: {
      evenNumbers: function () {
        return this.numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }
    
    <li v-for="n in even(numbers)">{{ n }}</li>
    data: {
      numbers: [ 1, 2, 3, 4, 5 ]
    },
    methods: {
      even: function (numbers) {
        return numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }
    

    相关文章

      网友评论

        本文标题:Vue学习笔记之列表渲染

        本文链接:https://www.haomeiwen.com/subject/owmxyftx.html