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 ><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 ><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 ><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
})
}
}
以上是 VUE 入门基础(6) 的全部内容， 来源链接： utcz.com/z/379785.html
