小白教程
所有教程
关于
Search
172.70.100.118
172.70.100.118
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Vue3 条件语句”的源代码
本页内容
上一节:
Vue3_模板语法
下一节:
Vue3_循环语句
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Vue3 条件语句}}[[Category:Vue 3 教程|8]] = Vue3 条件语句 = == 条件判断 == === v-if === 条件判断使用 v-if 指令,指令的表达式返回 true 时才会显示: == v-if 指令 == 在元素中使用 v-if 指令: <sample title="" desc="" lang="html" hererun="1"> <div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> const app = { data() { return { seen: true /* 改为false,信息就无法显示 */ } } } Vue.createApp(app).mount('#app') </script> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script> </head> <body> <div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> const app = { data() { return { seen: true /* 改为false,信息就无法显示 */ } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> 这里, v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。 因为 v-if 是一个指令,所以必须将它添加到一个元素上。如果是多个元素,可以包裹在 <template> 元素上,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。 == v-if 指令 == 在 <template> 元素上使用 v-if 指令: <sample title="" desc="" lang="html" hererun="1"> <div id="app"> <template v-if="seen"> <h1>网站</h1> <p>Google</p> <p>xiaoBai</p> <p>Taobao</p> </template> </div> <script> const app = { data() { return { seen: true /* 改为false,信息就无法显示 */ } } } Vue.createApp(app).mount('#app') </script> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script> </head> <body> <div id="app"> <template v-if="seen"> <h1>网站</h1> <p>Google</p> <p>xiaoBai</p> <p>Taobao</p> </template> </div> <script> const app = { data() { return { seen: true /* 改为false,信息就无法显示 */ } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> === v-else === 可以用 v-else 指令给 v-if 添加一个 "else" 块: == v-else 指令 == 随机生成一个数字,判断是否大于 0.5,然后输出对应信息: <sample title="" desc="" lang="html" hererun="1"> <div id="app"> <div v-if="Math.random() > 0.5"> 随机数大于 0.5 </div> <div v-else> 随机数小于等于 0.5 </div> </div> <script> Vue.createApp(app).mount('#app') </script> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script> </head> <body> <div id="app"> <div v-if="Math.random() > 0.5"> 随机数大于 0.5 </div> <div v-else> 随机数小于等于 0.5 </div> </div> <script> Vue.createApp(app).mount('#app') </script> </body> </html> </run> === v-else-if === v-else-if 即 v-if 的 else-if 块,可以链式的使用多次: == v-else 指令 == 判断 type 变量的值: <sample title="" desc="" lang="html" hererun="1"> <div id="app"> <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> </div> <script> const app = { data() { return { type: "C" } } } Vue.createApp(app).mount('#app') </script> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script> </head> <body> <div id="app"> <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> </div> <script> const app = { data() { return { type: "C" } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run> <blockquote>v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 </blockquote> === v-show === 我们也可以使用 v-show 指令来根据条件展示元素: == v-show 指令 == <sample title="" desc="" lang="html" hererun="1"> <h1 v-show="ok">Hello!</h1> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script> </head> <body> <div id="app"> <h1 v-show="ok">Hello!</h1> </div> <script> const app = { data() { return { ok: true } } } Vue.createApp(app).mount('#app') </script> </body> </html> </run>
返回至“
Vue3 条件语句
”。
上一节:
Vue3_模板语法
下一节:
Vue3_循环语句