Vue 条件判断与循环
项目前导 学习笔记
一、条件判断
1.1、简单判断
在模板中，可以根据条件进行渲染。条件用到的是 v-if、v-else-if 、v-else 来组合实现的。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 模板使用title>
head>
<body>
<div id="app">
<p v-if="weather == 'sun'">今天出去玩！p>
<p v-else-if="weather == 'rain'">今天去看电影！p>
<p v-else>今天哪儿也不去！p>
div>
body>
html>
<script src="./vue.js">script>
<script>
new Vue({
el: "#app",
data: {
weather: "sun"
}
});
script>
1.2、简单判断
有时候我们想要在一个条件中加载多个 html 元素，那么我们可以通过 template 元素上实现。
<div id="app">
<template v-if="age<18">
<p>数学多少分？p>
<p>英语多少分？p>
template>
<template v-else-if="age>=18 && age<25">
<p>什么专业？p>
<p>什么时候毕业？p>
template>
<template v-else>
<p>工资多少？p>
<p>女朋友找到了吗？p>
template>
div>
<script>
let vm = new Vue({
el: "#app",
data: {
age: 24
}
});
script>
1.3、登录方式之间切换
另外，在模板中，Vue 会尽量重用已有的元素，而不是重新渲染，这样可以变得更加高效。如果你允许用户在不同的登录方式之间切换。
<div id="app">
<template v-if="loginType=='username'">
<label for="username">用户名：label>
<input type="text" id="username" name="username" placeholder="用户名">
template>
<template v-else-if="loginType=='email'">
<label for="email">邮箱：label>
<input type="text" id="email" name="email" placeholder="邮箱">
template>
<div>
<button v-on:click="changeLoginType">切换登录类型button>
div>
div>
<script>
let vm = new Vue({
el: "#app",
data: {
loginType: "username"
},
methods: {
changeLoginType: function(event){
this.loginType = this.loginType=="username"?"email":"username";
}
}
});
script>
1.4、切换的同时清空文本框数据
这个里面会有一个问题，就是如果我在 username 的输入框中输入完信息，切换到邮箱中，之前的信息还是保留下来，这样肯定不符合需求的，如果我们想要让 html 元素每次切换的时候都重新渲染一遍，可以在需要重新渲染的元素上加上唯一*的 key 属性，其中 key 属性推荐使用整形，字符串类型。
注意，元素仍然会被高效地复用，因为它们没有添加 key 属性。
唯一：key 的值在同一 html 文件中唯一就行，值不固定，但一般写为能表示其含义的值。
<div id="app">
<template v-if="loginType=='username'">
<label for="username">用户名：label>
<input type="text" id="username" name="username" placeholder="用户名" key="username">
template>
<template v-else-if="loginType=='email'">
<label for="email">邮箱：label>
<input type="text" id="email" name="email" placeholder="邮箱" key="email">
template>
<div>
<button v-on:click="changeLoginType">切换登录类型button>
div>
div>
1.5、v-show 和 v-if
v-if 是 “真正” 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
二、循环
在模板中可以用 v-for 指令来循环数组，对象等。
2.1、循环数组
- v-for 循环语句中，第一个取出的是数值（value），第二个取出的是索引（key）。
<div id="app">
<table>
<tr>
<th>序号th>
<th>标题th>
<th>作者th>
tr>
<tr v-for="(value, key) in books">
<td>{{key}}td>
<td>{{value.title}}td>
<td>{{value.author}}td>
tr>
table>
div>
<script>
let vm = new Vue({
el: "#app",
data: {
<!-- 用数组存储 -->
books: [
{
"title": "Python",
"author": "龟叔"
},
{
"title": "C++",
"author": "xxx1"
},
{
"title": "JAVA",
"author": "xxx2"
}
]
}
});
script>
2.2、循环对象
- 循环对象跟循环数组是一样的，并且都可以在循环的时候使用接收多个参数。
<div id="app">
<div v-for="(value,key) in person">
{{key}}: {{value}}
div>
div>
<script>
let vm = new Vue({
el: "#app",
data: {
person: {
"username": "老李",
"age": 18,
"homepage": "https://www.baidu.com/"
}
}
});
script>
三、保持状态
3.1、书名进行排序
<div id="app">
<div v-for="book in books">
<label for="book">{{book}}label>
<input type="text" v-bind:placeholder="book">
div>
<button v-on:click="changeBooks">更换图书button>
div>
<script>
new Vue({
el: "#app",
data: {
books: ['三国演义','水浒传','红楼梦','西游记']
},
methods: {
changeBooks:function(){
// 使用 sort 结合匿名函数对数组进行排序
this.books.sort(
// 使用匿名函数 + 随机正负来为书本进行随机数值排序
// 其中 x, y 表示每次从 books 取两个值
function(x,y){ return 5-Math.random()*10 }
)
}
}
})
script>
虽然实现了顺序的变化，但是输入框中的内容不能根据对应的顺序进行改变，这时需要使用 key 就能解决。
3.2、保持状态
循环出来的元素，如果没有使用 key 元素来唯一标识，如果后期的数据发生了更改，默认是会重用的，并且元素的顺序不会跟着数据的顺序更改而更改。
- 注意：是在
v-for循环的地方加key
<div v-for="book in books" v-bind:key="book">
{{book}}label>
<input type="text" v-bind:placeholder="book">
div>