Vue列表渲染

用v-for把一个数组映射为一组元素

用v-for指令基于一个数组来渲染一个列表

v-for指令需要使用item in items形式的特殊语法

items是源数据数组

item是被迭代的数组元素的别名

<ul id="array-rendering">
     <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>

Vue.createApp({
      data(){
          return {
              items:[{message:'Foo'},{message:'Bar'}]
          }
      }
})

在v-for块中，可以访问所有父作用域的property

v-for还支持一个可选的第二个参数

即当前项的索引

<ul id="array-with-index">
    <li v-for="(item,index) in items">
        {{parentMessage}}-{{index}}-{{item.message}}
    </li>
</ul>

Vue.createApp({
     data(){
         return{
           parentMessage:'Parent',
           items:[{message:'Foo'},{message:'Bar'}]
         }
     }
}).mount('#array-with-index')

也可以用of替代in作为分隔符

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

在v-for里使用对象

用v-for遍历一个对象的property

<ul id="v-for-object" class ="demo">
    <li v-for="value in myObject"></li>
</ul>

Vue.createApp({
   data(){
   return{
       myObjcet:{
           title:'How to do lists in Vue',
           author:'Jane Doe',
           publishedAt:'2016-04-10'
       }
     }
   }
}).mount('#v-for-objcet');

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

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

还可以用第三个参数

<li v-for="(value,name,index) in myObject">
{{name}}:{{value}}:{{index}}
</li>

在遍历对象时，会按Object.keys()的结果遍历

但是不能保证它在不同JavaScript引擎下的结果都一致

维护状态

当Vue正在更新使用v-for渲染的元素列表时

它默认使用“就地更新”的策略

如果数据项的顺序被改变

Vue将不会移动DOM元素来匹配数据项的顺序

而是就地更新每个元素

并且确保它们在每个索引正确渲染

这个默认的模式是高效的

但是只适用于不依赖子组件状态或临时DOM状态(例如：表单输入值)的列表渲染输出

为了给Vue一个提示

以便它能跟踪每个节点的身份

从而重用和重新排序现有元素

需要为每一项提供一个唯一的keyattribute

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

建议尽可能在使用v-for时提供keyattribute

除非遍历输出的DOM内容非常简单’

或者刻意依赖默认行为获取性能上的提示

不要使用对象或数组之类的非基本类型值作为v-for的key

请用字符串或数值类型的值

数值更新检测

变更方法

Vue将被侦听的数组的变更方法进行了包裹

它们将会触发视图更新

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

替换数组

filer()

concat()

slice()

不会变更原始数组

总是返回一个新的数组

用新数组替换旧数组

example1.items = example1.items.filter(item => item.messgae.match(/Foo/))

你可以认为这将导致Vue丢弃现有的DOM并重新渲染整个列表

但事情并非如此

显示过滤/排序后的结果

显示一共数组经过过滤或排序后的版本

创建一个计算属性来返回过滤或排序后的数组

<li v-for="n in evenNumbers" :key="n">{{n}}</li>

data(){
    return{
        numbers:[1,2,3,4,5]
    }
},
computed:{
    evenNumbers(){
        return this.numbers.filter(number => number % 2 === 0)
    }
}

在计算属性不适用的情况下

在循环中使用一个方法

<ul v-for="numbers in sets">
    <li v-for="n in even(numbers)" :key="n">{{n}}</li>
</ul>

data(){
  return {
      sets:[[1,2,3,4,5],[6,7,8,9,10]]
  }
},
methods:{
        even(numbers){
            return numbers.filter(number => number % 2 ===0 )
        }
}

在v-for里使用值的范围

v-for可以接受整数

这种情况下

它会把模板重复对应次数

{{n}}

在<template>中使用v-for

利用带有v-for的<template>

来循环渲染一段包含多个元素的内容

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

v-for与v-if一同使用

当它们处于同一节点

v-if的优先级比v-for更高

这意味着v-if将没有权限访问v-for里的变量

<!--这将抛出一个错误，因为“todo”prperty没有在实例上定义-->
<li v-for="todo in todos" v-if="!todo.name">
{{todo.name}}
</li>

可以把v-for移动到<template>标签中拉修正

<template v-for="todo in todos" :key="todo.name">
    <li v-if="!todo.isComplete">
    {{todo.name}}
    </li>
</tempalte>