9 conditions rendering
9.1 v-if
v-if conditional instructions for rendering a content.
<h1 v-if="awesome">Vue is awesome!</h1>
Using v-if conditions rendered packets on <template> element
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
V-else
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else element must immediately behind the belt element, or v-if v-else-if otherwise it will not be recognized.
v-else-if
2.1.0 New
v-else-if, as the name implies, serve as a v-if "else-if blocks" can be used continuously:
<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>
After similar v-else, v-else-if band element must immediately or v-if the v-else-if.
Manage reusable elements with key
Vue will render elements as efficiently as possible, often reusing existing elements rather than starting from scratch rendering. In addition to doing the Vue become very fast, there are a number of other benefits. For example, if you allow the user to switch between different login:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
Then switching loginType above code will not erase the content that the user has entered. Since both templates use the same elements, <input> will not be replaced - just replace its placeholder.
Try it yourself, enter some text in the input box, and then press the toggle button.
This is not always in line with the actual demand, the Vue provides a way for you to express "These two elements are completely independent and do not reuse them." Just add a key property to have a unique value:
<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>
Now, each time you switch the input box will be re-rendered.
Note, <label> element will still be efficiently reused, because they do not add the key attribute.
9.2 v-show
Another option for the display element in accordance with the conditions that v-show instruction. Usage roughly the same:
<h1 v-show="ok">Hello!</h1>
The difference is that with v-show elements will always be rendered and retained in the DOM. v-show simply switch the CSS property display element.
Note, v-show does not support the <template> element, does not support the v-else.
9.3 v-if vs v-show
v-if "real" conditions rendering, because it will ensure that the event listener and sub-components within the conditional block is destroyed and rebuilt properly in the handover process.
v-if is inert: If the condition is false at the time of the initial rendering, do nothing - until the condition becomes true when the first time, will begin to render conditional block.
In contrast, v-show much simpler - no matter what the initial conditions, the elements will always be rendered, and simply based on the CSS switch.
In general, v-if higher switching overhead, and v-show a higher initial cost of rendering. Therefore, if the switching is very frequently used is preferably v-show; if conditions rarely change at runtime, using v-if preferred.
9.4 v-if used in conjunction with v-for
Not recommended to use v-if and v-for.
When the v-if used in conjunction with v-for, v-for priority than v-if higher.
Complete code:
9 conditions render 1.html
<!DOCTYPE html>
<html>
<head>
<Title> conditions rendering </ title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="awesome">Vue is awesome!</h1><br>
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
<div v-if="type === 'A'">
AA
</div>
<div v-else-if="type === 'B'">
BB
</div>
<div v-else-if="type === 'C'">
CC
</div>
<div v-else>
Not AA/BB/CC
</div>
<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><br>
<button v-on:click="loginType='email'">email</button>
</div>
<script>
was app = new Vue ({
the '#app'
data: {
awesome: true,
ok: true,
type: 'B',
loginType: 'username'
}
})
</script>
</body>
</html>
9 conditions render 2.html
<!DOCTYPE html>
<html>
<head>
<Title> conditions rendering </ title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="awesome">Vue is awesome!</h1><br>
<h1 v-show="ok">Hello!</h1>
</div>
<script>
was app = new Vue ({
the '#app'
data: {
awesome: false,
ok: false
}
})
</script>
</body>
</html>
Welcome to watch the video tutorial: https://ke.qq.com/course/432961?tuin=36914f34 , if in doubt, please add QQ chat discussion groups 665,714,453.