1. Condition judgment
1. v-if、v-else、v-elseif
v-if is used for conditional judgment to determine whether the Dom element is displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-if="isFlag">isFlag为true显示这个</h2>
<h2 v-show="isShow">isShow为true是显示这个</h2>
<div v-if="age<18">小于18岁未成年</div>
<div v-else-if="age<60">大于18岁小于60岁正值壮年</div>
<div v-else="">大于60岁,暮年</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
isFlag:true,
isShow:false,
age:66
}
})
</script>
</body>
</html>(1) Use v-if alone, the variable is a Boolean value, and the Dom is rendered only when it is true
(2) The variable of v-show is also a boolean value, and the content is displayed only when it is true, similar to css display
(3) The combined use of v-if, v-else, and v-else-if is equivalent to if, elseif, and else, but it is recommended to use computed properties when there are many conditions.
2. The demo of v-if
When logging in to the website, you can often choose to use the switch button to log in with the account name or email address. It is required to click the button to switch the login method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="请输入用户名" >
</span>
<span v-else="isUser">
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="请输入用户邮箱" >
</span>
<button @click="isUser=!isUser">切换类型</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
isUser:true
}
})
</script>
</body>
</html> Use v-ifand v-elseselect to render the specified Dom, and click the button to isUserinvert the variable.
There is a small problem here. If you have already entered the account number and want to switch to the mailbox input at this time, the input box is not cleared by itself.
Here we need to understand the underlying operation of Vue. At this time, the value of the input input box is reused.
(1) When vue is performing DOM rendering, for performance reasons, it will reuse existing elements instead of creating new DOM elements every time.
(2) In the above demo, Vue internally found that the original input element is no longer used, so it is directly mapped to the corresponding virtual DOM for reuse.
(3) If you do not want similar reuse problems, you can add values to the corresponding dom elements
keyand ensure thatkeythey are different.
<input type="text" id="username" placeholder="请输入用户名" key="username">
<input type="text" id="email" placeholder="请输入用户邮箱" key="email">3. v-show
When v-if is rendered for the first time, if the condition is false, nothing will be done, and the page will be deemed to have no such elements. When the condition is true, start partial compilation and dynamically add elements to the DOM element. When the condition changes from true to false, start partial compilation, unload these elements, that is, delete.
v-show Regardless of whether the condition is true or false, it will be compiled when it is rendered for the first time, that is, the label will be added to the DOM. When switching later, use the display: none; style to display hidden elements. It can be said that just changing the style of css will hardly affect any performance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-show="isFlag">v-show只是操作元素的style属性display</h2>
<h2 v-if="isFlag">v-if是新增和删除dom元素</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
isFlag:true
}
})
</script>
</body>
</html>2. Loop traversal
1. v-for traverse array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.遍历过程没有使用索引（下标值） -->
<ul>
<li v-for="item in names" >{
{item}}</li>
</ul>
<!-- 2.遍历过程有使用索引（下标值） -->
<ul>
<li v-for="(item,index) in names" >{
{index+":"+item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
names:["zzz","ttt","yyy"]
}
})
</script>
</body>
</html> Generally need to use the index value. <li v-for="(item,index) in names" >{
{index+":"+item}}</li>index indicates the index, and item indicates the currently traversed element.
2. v-for traverses objects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.遍历过程没有使用index索引-->
<!-- 格式为：(value, name) -->
<ul>
<li v-for="(item,key) in user" >{
{key+"-"+item}}</li>
</ul>
<!-- 格式为：(value, name, index) -->
<ul>
<li v-for="(item,key,index) in user" >{
{key+"-"+item+"-"+index}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
user:{
name:"zzz",
height:188,
age:24
}
}
})
</script>
</body>
</html>
- The traversal process does not use the index index,
<li v-for="(item,key) in user" >{ {key+"-"+item}}</li>, item indicates that the current element is an attribute value, and key indicates the attribute name of the user object.- The traversal process uses the index index, which means that the index starts from 0.
