锐客网

  1. 首页 > it技术 > >

Vue列表渲染

Vue列表渲染

列表循环 v-for 将一个数组对应为一组元素
v-for指令根据数组选项列表进行渲染，使用时需使用item in items形式的特殊语法。items是源数据数组且item是数组元素迭代的别名。

Document

【Vue列表渲染】v-for块中，拥有对父作用域属性的完全访问权限。v-for支持一个可选第二个参数为当前项的索引。
Document

可使用of替换in作为分隔符，因为它最接近JS迭代器的语法

一个对象的 v-for
可使用v-for通过一个对象的属性来迭代
Document

v-for提供第二个参数为键名
  • {{key}} {{val}}

    • v-for提供第三个参数为索引
  • {{idx}} {{key}} {{val}}

    • 在遍历对象时，是按Object.keys()的结果遍历，不能保证其结果在不同的JS引擎下是一致的。
    key 当Vue.js用v-for正在更新已渲染过的元素列表时，默认使用"就地复用"策略。若数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，且确保它在特定索引下显示已被渲染过的每个元素。这个默认的模式是高效的，但只适用于不依赖子组件状态或临时DOM状态的列表渲染输出。
    为了给Vue一个提示，以便能跟踪每个节点的身份，从而重用和重排现有元素,需为每项提供一个唯一的key属性。理想的key值是每项都有且仅有唯一的id。这个特殊的属性的工作方式类似于一个属性，需使用v-bind来绑定动态值。

  • 建议尽可能在使用v-for时提供key，除非遍历输出的DOM内容非常简单，或是刻意依赖默认行为以获取性能上的提升。
    因为它是Vue识别节点的一个通用机制，key并不与v-for特别关联，key具有其他用途。
    数组更新检测 变异方法
    Vue包含一组观察数组的变异方法，它们会触发视图更新。
    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()
    app.items = app.items.push({message:'foo'});

    替换数组
    • 变异方法(mutation method)顾名思义，会改变方法调用的原始数组。
    • 非变异方法(non-mutating method)不会改变原始数组，总是返回一个新数组。
    当使用非变异方法时，可用新数组替换旧数组。
    • filter()
    • concat()
    • slice()
    app.items = app.items.filter(function(item){ return item.message.match(/foo/); });

    非变异方法并不会导致Vue丢弃现有DOM并重新渲染整个列表，Vue为了使得DOM元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替代原来的数组是非常高效的。
    注意事项
    由于JS自身限制Vue不能检测以下变动的数组：
    • 当利用索引直接设置一个项时 vm.items[index]=newVal
    • 当修改数组的长度时 vm.items.length=newLen
      为解决第一类问题，以下两种方式都可以实现和vm.items[index]=newVal相同的效果，同样也触发状态更新。
    // Vue.set Vue.set(app.items, index, newVal)// Array.prototype.splice app.items.splice(index, 1, newVal);

    为了解决第二类问题可使用splice
    app.items.splice(newLen)

    对象更改检测注意事项 由于JS限制Vue无法检测对象属性的添加或删除
    var vm = new Vue({ data:{ message:'hello' } }); //vm.message是响应式的 vm.username = 'alice'; //非响应式

    对于已经创建的实例，Vue无法动态添加根级别的响应式属性。但可使用Vue.set(obj,key,val)方式向嵌套对象添加响应式属性。
    var vm= new Vue({ data:{ profile:{ name:'alice' } } }); //添加新属性到嵌套的profile对象 Vue.set(vm.profile, 'age', 20); //使用vm.$set实例方法，它只是全局Vue.set的别名。 vm.$set(this.profile, 'age', 20);

    有时可能需为已有对象赋予多个新属性，如使用Object.assign()或_.extend()。在这种情况下，用两个对象的属性创建一个新对象。若想添加新的响应式属性：
    this.profile = Object.assign({}, this.profile, {age:31, color:'green'})

    显示过滤/排序结果
    想要显示一个数组的过滤或排序副本，而非实际改变或重置原始数据。此情况下可创建返回过滤或排序数组的计算属性。
    Document

    当计算属性不适用情况下，如在嵌套v-for循环中，可使用method方法。
    Document

    取值范围的v-for v-for可取整，此情况下将重复多次模板。
    Document

    v-for on a