条件判断
- v-if、v-else-if、v-else
- 这三个指令与JavaScript的条件语句if、else、else if类似。
- Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。
- 简单的案例演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-v-if、v-else-if、v-else的使用</title>
</head>
<body>
<div id="app">
<h2 v-if="score>=85">优秀</h2>
<h2 v-else-if="score>=75">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
score: 99,
}
})
</script>
</body>
</html>
-
v-if的原理:
- v-if后面的条件为false时,对应的元素以及其子元素不会渲染。
- 也就是根本不会有对应的标签出现在DOM中。
-
一般v-else-if使用的较少,因为如果需要逻辑判断比较复杂,这种写法不是很好,一般可以通过计算属性完成。
条件渲染案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-条件渲染案例</title>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="userName">用户账号</label>
<input type="text" id="userName" placeholder="用户账号">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱">
</span>
<button @click="isUser = !isUser">切换登录方式</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
}
})
</script>
</body>
</html>
案例小问题
- 小问题:
- 如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前输入的内容。
- 但是按道理讲,我们应该切换到另一个input元素中了。
- 在另一个input元素中,我们并没有输入内容。
- 为什么会出现这个问题呢?
- 问题解答:
- 这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建元素。
- 在上面的案例中,Vue内部会发现原来的input不再使用,直接作为else中的input来使用了。
- 解决方案:
- 如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key。
- 并且我们需要保证key的不同。
v-show与v-if的区别
- v-show的用法和v-if非常相似,也用于决定一个元素是否渲染。
- v-if和v-show对比
- v-if和v-show都可以决定一个元素是否渲染,那么开发中我们如何选择呢?
- v-if当条件为false时,压根不会有对应的元素在DOM中。
- v-show当条件为false时,仅仅是将元素的display属性设置为none而已。
- 开发中如何选择呢?
- 当需要在隐藏与显示之间频繁切换时,使用v-show。
- 当只有一次切换时,通过使用v-if。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-v-show的使用</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow" id="if">{{message}}</h2>
<h2 v-show='isShow' id="show">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "我是阿牛",
isShow: true
}
})
</script>
</body>
</html>
循环遍历
v-for遍历数组
- 当我们有一组数据需要渲染时,我们就可以使用v-for来完成。
- v-for的语法类似于JavaScript中的for循环。
- 格式:
item in itmes
。
- 我们来看一个简单的案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-v-for遍历数组</title>
</head>
<body>
<div id="app">
<!-- 不需要索引值 -->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!-- 需要索引值 -->
<ul>
<li v-for="(item, index) in names">{{index+1}}-->{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
names: ['阿牛', 'kobe', 'james', '小华']
}
})
</script>
</body>
</html>
- 如果在遍历的过程中不需要使用索引值
v-for="movie in movies"
- 依次从movies中取出movie,并且在元素的内容中,我们可以通过Mustache语法,来使用movie。
- 如果在遍历的过程中,我们需要拿到元素在数组中的索引值呢?
- 语法格式:
v-for=(item, index) in items
- 其中的index就代表了取出的item在原数组的索引值。
- 语法格式:
v-for遍历对象
- v-for可以用户遍历对象:
- 比如某个对象中存储着你的个人信息,我们希望以列表的形式显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-v-for遍历对象</title>
</head>
<body>
<div id="app">
<!-- 在遍历对象的过程中,如果只是获取一个值,那么获取到的是value -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 要获取key和value 格式:(value, key) -->
<ul>
<li v-for="(item, key) in info">{{item}}-->{{key}}</li>
</ul>
<!-- 要获取key、value和index 格式:(value, key, index)-->
<ul>
<li v-for="(item, key, index) in info">{{item}}-->{{key}}-->{{index}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
info: {
name: 'lz',
age: 18,
height: 180
}
}
})
</script>
</body>
</html>
组件的key属性
当 Vue 正在更新使用 v-for
渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"
。
这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
attribute:
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
建议尽可能在使用 v-for
时提供 key
attribute,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制,key
并不仅与 v-for
特别关联。后面我们将在指南中看到,它还具有其它用途。
不要使用对象或数组之类的非基本类型值作为
v-for
的key
。请用字符串或数值类型的值。
回顾
Vue笔记一——Vue安装与体验
Vue笔记二——Vue声明周期与模板语法
Vue笔记三——计算属性(computed)
Vue笔记四——事件监听的使用