Vue 条件
v-if …… v-if-else …… v-else
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="app">
<h1 v-if="message === 'Vue'">Vue</h1>
<h1 v-else-if="message === 'Laravel'">Laravel</h1>
<h1 v-else>
不是 Vue 也不是 Laravel
</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
faq: ' ',
message: 'Vue'
}
})
</script>
|
当地一个条件满足Vue的时候，则自然而然的显示Vue，但如果第一条件不满足但满足了第二条件Laravel，则自然而然的显示Laravel，如果都不满足则输出v-else指令内的信息。
v-if
vue中我们可以通过使用v-if有条件的渲染一块内容，就比如下述code中的message值如果是true则会显示：
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="app">
<h1 v-if="message">Vue is awesome!</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
faq: ' ',
message: false
}
})
</script>
|
v-else
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="app">
<h1 v-if="message">Vue is awesome!</h1>
<h1 v-else="message">Hello,world</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
faq: ' ',
message: false
}
})
</script>
|
如果将message的值为false，那么则显示v-else内的数据，当v-if符合条件则显示其v-if块的信息。
key
复用 key
通过使用key我们可以管理可复用的元素，且vue也会尽可能的提高渲染的效率，使用可服用的元素的好处就是元素不会从头开始进行渲染，这也使得vue变得稍微快一点：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div id="app">
<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>
<button @click="toggleLoginType">Toggle login type</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
loginType: 'username'
},
methods: {
toggleLoginType: function () {
return this.loginType = this.loginType === 'username' ? 'email' : 'username'
}
}
})
</script>
|
在上述code中，我们主要切换了loginType的值，也就是当不满足username条件的时候切换为else块的placeholder，而使得切换效果的功能主要通过v-on进行实现。
唯一 key
复用key的缺点是表单内的信息也会被同步，而如果设置一个唯一的key，则每个数据都是独立的，服用的只是房子本身而并非里面的装饰物：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div id="app">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email">
</template>
<button @click="leghtLoginType">Toggle login type</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
loginType: 'username'
},
methods: {
leghtLoginType: function () {
return this.loginType = this.loginType === 'username' ? 'email' : 'username'
}
}
})
</script>
|
v-show
在前端的开发当中我们经常会使用一个非常棒的方法即display，通常当display的值如果为none则不会进行显示。在vue中，v-show主要用于切换display的CSS 属性：
1
2
3
4
5
6
7
8
9
10
11
| <div id="app">
<h1 v-show="show">Hello,Vue</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
</script>
|
当在控制端中执行app.show=false的时候，则此时<h1>标签的css属性将会更改为display: none，则不可见，v-if与v-show的区别可以是：
| ID |
DA |
| v-if |
通过vue进行条件渲染，确保在切换的过程中被销毁和重建 |
| v-show |
不管条件如何，元素依然会被显然，只是根据 CSS display 属性进行切换 |
|
v-if拥有更高的切换开销，v-show则有更高的初始渲染的开销 |
⬅️ Go back
