当前位置：首页 > news >正文

Vue条件判断：v-if、v-else、v-else-if、v-show 指令

news 2025/11/26 22:51:04

在程序设计中，条件判断是必不可少的技术。在视图中，经常需要通过条件判断来控制 DOM 的显示状态。Vue.js 提供了相应的指令用于实现条件判断，包括：v-if、v-else、v-else-if、v-show 指令。

1、v-if 指令

v-if 指令可以根据表达式的值来判断是否输出 DOM 元素及其包含的子元素。如果表达式的值为 true，就输出 DOM 元素及其包含的子元素；否则，就将 DOM 元素及其包含的子元素移除。

【实例】使用 v-if 指令，判断是否显示 DOM 元素。

<body><div id="app"><h3>{{title}}</h3><p>Tom 的年龄是{{age}}</p><p v-if="age < 18">Tom 未成年</p><template v-if="show"><p>博客信息：{{blogName}}</p><p>博客地址：{{blogUrl}}</p></template></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {title: "使用 v-if 指令",age: 16,show: true,blogName: "您好，欢迎访问 pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao"}}//使用 mount() 方法，装载应用程序实例的根组件}).mount('#app'); 
</script>

执行结果：

2、v-else 和 v-else-if 指令

v-else 指令的作用相当于 JavaScript 中的 else 语句部分的作用。可以将 v-else 指令配合 v-if 指令一起使用。

v-else-if 指令的作用相当于 JavaScript 中的 else if 语句部分的作用。应用该指令可以进行更多的条件判断，不同的条件对应不同的输出结果。

【实例】使用 v-if、v-else、v-else-if 指令，判断当前月份属于哪个季节。

<body><div id="app"><h3>{{title}}</h3><p>当前月份是 {{month}} 月</p><div v-if="month >= 1 && month <= 3">当前月份属于：春季</div><div v-else-if="month >= 4 && month <= 6">当前月份属于：夏季</div><div v-else-if="month >= 7 && month <= 9">当前月份属于：秋季</div><div v-else>当前月份属于：冬季</div></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {title: "使用 v-if、v-else、v-else-if 指令",month: new Date().getMonth() + 1}}//使用 mount() 方法，装载应用程序实例的根组件}).mount('#app'); 
</script>

执行结果：

3、v-show 指令

v-show 指令是根据表达式的值来判断是显示还是隐藏 DOM 元素。当表达式的值为 true 时，元素将被显示；当表达式的值为 false 时，元素将被隐藏，此时为元素添加了一个内联样式：style="display: none"。与 v-if 指令不同，对于使用 v-if 指令的元素，无论表达式的值为 true 还是 false，该元素始终会被渲染并保留在 DOM 中。绑定值的改变只是简单地切换元素的 CSS 属性 display。

注意：

v-show 指令不支持<template>元素，也不支持 v-else 指令。

【实例】使用 v-show 指令，切换内容的显示和隐藏。

<body><div id="app"><input type="button" :value="bText" v-on:click="toggle" /><div v-show="isShow"><p>博客信息：{{blogName}}</p><p>博客地址：{{blogUrl}}</p></div></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {isShow: true,bText: "隐藏内容",blogName: "您好，欢迎访问 pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao"}},//方法methods : {toggle : function(){//切换按钮文字this.bText == '隐藏内容' ? this.bText = '显示内容' : this.bText = '隐藏内容';this.isShow = !this.isShow;//修改属性值}}//使用 mount() 方法，装载应用程序实例的根组件}).mount('#app'); 
</script>

执行结果：