vue入门总结第二弹——列表渲染v-for和条件渲染v-if以及v-show
v-for列表渲染
迭代普通数组
用这个指令基于一个数组来渲染一个列表，使用方法：v-for=“item in items”，其中items时源数据数组，item时被迭代的数组元素别名。
v-for
用法：
v-for在遍历对象身上的键值对的时候，一共有三个参数，val，key，以及index。其中，val是值，key是键，index是索引，索引从零开始，键是根据键名称出现。
<ul id="ex1">
<li v-for="item in items" :key="item.message">
{{item.message}}
</li>
</ul>
<script>
var ex1=new Vue({
el:'#ex1',
data:{
items:[
{message:'A'},
{message:'b'}
]
}
})
//输出结果为:
//·A
//·b
</script>
AI写代码可以访问所有父作用域的property，第二个参数为当前项的索引值。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
<script>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
//输出为
//patent-0-foo
//parent--bar
</script>
AI写代码对象
遍历一个对象的所有property。
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
<script>
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
</script>
AI写代码第二个参数也可以为property名称，也就是键名
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
<!--
输出结果为：
title: How to do lists in Vue，
author: Jane Doe,
publishedAt: 2016-04-10
-->
AI写代码第三个参数作为索引
<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
-->
AI写代码维护状态
当vue正在更新使用v-for渲染的元素列表时，默认使用就地更新策略，数据项顺序改变，dom元素不会被移动，而是就地更新来确保索引位置正确渲染。但是这个只适用于不依赖自组件状态或临时dom状态（如：表单输入值）的列表渲染输出。
key是给vue的提示，应尽量提供key attribute。不要用对象或数组之类的非基本类型值作为key，要用字符串或数值类型的值。key的特殊attribute主要用在vue的虚拟dom算法，在新旧nodes对比时辨识vnodes。如果不使用它，vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
<div v-for="item in items" v-bind:key="item.id">
内容
</div>
AI写代码v-for与整数
把模板重复对应次数。
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
<!--输出n次10-->
AI写代码循环多个元素内容
跟v-if一样在template书写，来循环渲染一段包含多个元素的内容。
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
AI写代码条件与循环渲染
v-if,v-else,v-else-if
<div v-if="ishow">我是第一个</div>
<!--v-else-if可以进行连用-->
<div v-else-if="!ishow">我是第二个</div>
<div v-else>我是第三个</div>
<!--若是要想切换到多个元素，可以用template当做包，在上面使用条件语句。最终渲染结果不包含template-->
<template v-if="i">
<div>lll</div>
<div>222</div>
<div>333</div>
</template>
<template v-else>
<div>444</div>
<div>555</div>
<div>666</div>
</template>
<script>
data(){
ishow:true//ishow为true输出第一个，为false输出第二个，当第二个条件为false时，输出第三个，这里要注意，若是第一个条件为true那么无论第二个条件是否正确，都不会进第二个。
}
</script>
AI写代码v-if和v-show
v-if才是真正的条件渲染，他会确保在切换过程中条件快内的时间监听器和子组件适当的被销毁和重建，他会一直等到条件第一次变为真才开始渲染条件块。
v-show不管初始条件是什么，元素总是会被渲染，且只是简单的基于css切换。
v-if有更高的切换开销，v-show有更高的初始渲染开销。需要频繁切换时用v-show，运行条件少改变用v-if。
v-for和v-if
他们处于同一节点，v-for的优先级高于v-if，v-if将分别运行于每个v-for循环。
**部分渲染节点：**放在同一个元素。
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
<!--用于渲染未完成的-->
AI写代码有条件跳过循环执行 ：v-if置于外层元素。
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
AI写代码注意：在2.2.0+版本里，当在组件上使用v-for时，key是必须的。