72 lines
1.6 KiB
Markdown
72 lines
1.6 KiB
Markdown
|
#### v-if
|
||
|
|
|
||
|
|
- 当 `v-if` 与 `v-for` 一起使用时，`v-for` 具有比 `v-if` 更高的优先级。不推荐两个一起使用
|
||
|
|
|
||
|
|
```html
|
||
|
|
<h1 v-if="awesome">Vue is awesome!</h1>
|
||
|
|
<h1 v-else>Oh no 😢</h1>
|
||
|
|
|
||
|
|
<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'">
|
||
|
|
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>
|
||
|
|
```
|
||
|
|
|
||
|
|
#### key管理可复用元素
|
||
|
|
|
||
|
|
- 那么在上面的代码中切换 `loginType` 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，`<input>` 不会被替换掉——仅仅是替换了它的 `placeholder`。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
- 这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 `key` attribute 即可
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
#### v-show
|
||
|
|
|
||
|
|
```html
|
||
|
|
<h1 v-show="ok">Hello!</h1>
|
||
|
|
```
|
||
|
|
|
||
|
|
- v-show` 不支持 `<template>` 元素，也不支持 `v-else
|
||
|
|
|