VUE 入门基础(6)
六，条件渲染 v-if 添加一个条件块 <h1 v-if=“ok”>Yes</h1> 也可以用v-else 添加else 块
<template> 中 v-if条件组
因为v-if 是一个指令，需要将它添加到一个元素上，但是如果我们想切换多个元素呢可以把一个<template> 元素当做包装元素，并在上面使用v-if,最终的渲染结果不会包括它。
<template>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>v-else 可以用v-else 指令给v-if 添加一个else 块
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>v-else 元素必须紧跟在v-if元素或者v-else-if 的后面 否则它不能被识别。 v-else-if 作用 v-if 的else-if 块，可以链式的多次使用
<div v-if="type ==='A'">
A
</div>
<div v-else-if="type ==='B'">
B
</div>
<div v-else-if="type ==='C'">
C
</div>
<div v-else>
Not A/B/C
</div>v-else-if必须跟在v-if或者v-else-if之后 使用key控制元素的可重用 vue提供一种方式让你可以自己决定是否要复用元素，你要做的是添加一个属性key ,key 必须带有唯一的值。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template><label> 元素仍然会被复用，因为没有添加了key 属性 v-show v-show 的元素会始终渲染并保持在DOM 中v-show 是简单的切换元素的css 属性display v-show 不支持<template>语法
七，列表渲染 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'}
]
}
})结果： Foo Bar 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'}
]
}
})结果： Parent - 0 -Foo Parent - 1 - Bar 也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
<div v-for="item of items"></div>Template v-for 如同 v-if 模板，你也可以用带有v-for 的<template> 标签来渲染多个元素块
<ul>
<template v-for="item in items">
<li>{{ itme.msg}}</li>
<li class="divider"></li>
</template>
</ul>对象迭代 v-for 也可以用v-for 通过一个对象的属性来迭代
<ul id="repeat-object">
<li v-for="value in object">
{{value}}
</li>
</ul>
new Vue({
el: ‘#repeat-object’,
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})结果： John Doe 30 也可以提供第二个的参数为键名：
<div v-for="(value,key) in object">
{{ key}} : {{ value }}
</div>第三个参数为索引
<div v-for="(value,key,index) in object">
{{ key }} ,{{key}} ,{{ value }}
</div>整数迭代 v-for v-for 也可以取整数，在这种情况下，它将重复多次模板
<div>
<span v-for="n in 10">{{n}} </span>
</div>组件 和v-for 在自定义数组里，你可以想任何普通元素一样使用v-for <my-component v-for="item in items"></my-component> 然而他不能自动传递传递数据到组件里，因为组件有自己独立的作用域，为了传递数据到组件里，我们要用props.
<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index">
</my-component>key 为了给vue 一个提示，以便它跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为，每一项 提供一个唯一key 属性，理想的key 值是每一项都有唯一id ，它的工作方式类似于一个属性，所以你需要v-bvind 来绑定动态值。
<div v-for="item in items" :key="item.id"></div>建议尽可能使用 v-for 来提供 key ，除非迭代 DOM 内容足够简单，或者你是故意要依赖于默认行为来获得性能提升。 数组更新检测 变异方法 vue包含一组观察数组的变异方法，所以我们将会触发视图更新，这些方法如下。 push() pop() shift() unshift() splice() sort() reverse() 重塑数组 变异方法会改变原始的数组，也有非变异方法，如：filter(),concat().slice(),这些不会改变原始数组，但是总是返回一个新数组，使用非变异方法的时候，可以用新数组变异方法时，可以用新数组替换久数组。
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})显示过滤/ 排序结果 想要显示一个数组的过滤或排序副本，而不时间改变或重置原始数据，可以创建过滤或排序数组的计算属性。
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [1,2,3,4,5]
},
computed: {
evenNumbers: function() {
evenNumbers: function(){
return this.numbers.filter(function (number){
return number % 2 ===0
})
}
}
}可以在计算属性不合适的情况下（列如，在嵌套 v-for 循环中） 使用method方法：
<li v-for="n in even(number)">{{ n }}</li>
data: {
numbers: [1,2,3,4,5]
},
methods: {
even: function(unmbers) {
return numbers.filter(function(number){
return number % 2 === 0
})
}
}