今天我们来学习下条件语句。
条件判断
v-if
条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示。
在元素中使用 v-if 指令：
HTML
x
25
25
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>7
</head>8
<body>9
<div id="app">10
<p v-if="seen">现在你看到我了</p>11
</div>12
13
<script>14
const app = {15
data() {16
return {17
seen: true /* 改为false，信息就无法显示 */18
}19
}20
}21
22
Vue.createApp(app).mount('#app')23
</script>24
</body>25
</html>这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
在<template>元素上使用 v-if 指令：
HTML
xxxxxxxxxx1
30
30
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>7
</head>8
<body>9
<div id="app">10
<template v-if="seen">11
<h1>网站</h1>12
<p>Google</p>13
<p>Web176教程</p>14
<p>Taobao</p>15
</template>16
</div>17
18
<script>19
const app = {20
data() {21
return {22
seen: true /* 改为false，信息就无法显示 */23
}24
}25
}26
27
Vue.createApp(app).mount('#app')28
</script>29
</body>30
</html>v-else
可以用 v-else 指令给 v-if 添加一个 “else” 块。
随机生成一个数字，判断是否大于 0.5，然后输出对应信息：
HTML
xxxxxxxxxx1
22
22
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>7
</head>8
<body>9
<div id="app">10
<div v-if="Math.random() > 0.5">11
随机数大于 0.512
</div>13
<div v-else>14
随机数小于等于 0.515
</div>16
</div>17
18
<script>19
Vue.createApp(app).mount('#app')20
</script>21
</body>22
</html>v-else-if
v-else-if 即 v-if 的 else-if 块，可以链式的使用多次。
判断 type 变量的值：
HTML
xxxxxxxxxx1
36
36
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>7
</head>8
<body>9
<div id="app">10
<div v-if="type === 'A'">11
A12
</div>13
<div v-else-if="type === 'B'">14
B15
</div>16
<div v-else-if="type === 'C'">17
C18
</div>19
<div v-else>20
Not A/B/C21
</div>22
</div>23
24
<script>25
const app = {26
data() {27
return {28
type: "C" 29
}30
}31
}32
33
Vue.createApp(app).mount('#app')34
</script>35
</body>36
</html>v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
HTML
xxxxxxxxxx1
25
25
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>7
</head>8
<body>9
<div id="app">10
<h1 v-show="ok">Hello!</h1>11
</div>12
13
<script>14
const app = {15
data() {16
return {17
ok: true 18
}19
}20
}21
22
Vue.createApp(app).mount('#app')23
</script>24
</body>25
</html>阅读剩余 84%
作者：terry，如若转载，请注明出处：https://www.web176.com/vue3/6283.html
支付宝 
微信 