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 }) } }
