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
})
}
}
- 如何在Hue中配置Impala的负载均衡
- 35行代码实现千万级别字典的快速去重
- PIMS三个漏洞+里程密最新版V2.3 SQL注入漏洞
- 如何在Redhat7.3安装CDH5.14
- CDSW1.3的新功能
- 如何在Hue中配置HiveServer2的负载均衡
- 如何修改CDH集群的IP地址
- 如何在Kerberos环境的CDH集群部署Livy
- 如何在Kerberos环境下使用Haproxy实现HiveServer2负载均衡
- Hive与Impala的关键字
- 如何通过Livy的RESTful API接口向非Kerberos环境的CDH集群提交作业
- 如何编译Livy并在非Kerberos环境的CDH集群中安装
- Livy,基于Apache Spark的开源REST服务,加入Cloudera Labs
- 如何在RedHat7上使用Bind搭建DNS服务
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法