首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue的条件判断

Vue的条件判断问题及说明

2026-05-18 16:59:11 作者：落雪小轩韩

文章主要介绍了Vue中的v-if、v-else-if和v-else的等这三种指令的使用方法和场景,还对比了v-if和v-show的区别,并提供了实际开发中选择v-if或v-show的的建议

Vue的条件判断

1.vue的条件判断：

v-if、v-else-if、v-else，这三个指令与JS的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。

2.指令v-if：可以用v-if指令的条件(判断)值来决定DOM的元素是否渲染出来；

3.使用方法：v-if="表达式"

<div id="app">
    <!-- 条件为true时，将message渲染出来，条件为false时，不渲染出来 -->
	<h2 v-if="true">{{message}}</h2>
	<h2 v-if="false">{{message}}</h2>
	<!-- 用data中的自定义数据show作为条件，则可以动态修改条件 -->
	<h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
    el: "#app",
    data: {
        message: '你好啊！',
        isShow: true
    }
})
</script>

v-if和v-else的结合使用

v-if：当表达式条件满足时，显示该指令元素里面的内容；
v-else : 否则表达式条件不满足，显示该指令元素里面的内容；

注意：

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<div id="app">
	<h2 v-if="isShow">{{message}}</h2>
	<h1 v-else>isShow为false时显示我</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
    el: "#app",
    data: {
        message: '你好啊！',
        isShow: true
    }
})
</script>

v-if、v-else和v-else-if的结合使用

v-if：条件满足，显示该元素里面的内容。
v-else-if：若v-if中条件不满足，则看v-else-if中条件是否满足，满足则显示该元素里面的内容。类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-else：若都不满足，则改元素中内容。

<div id="app">
	<h2 v-if="score>=90">优秀</h2>
	<h2 v-else-if="score>=80">良好</h2>
	<h2 v-else-if="score>=60">及格</h2>
	<h2 v-else>不及格</h2>
	
	 <!-- 	逻辑较多时，可以直接用计算属性来做 -->
	<h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
	el: "#app",
	data: {
	    score: 99
	},
	computed: {
	    result() {
	        let showMessage = ''
	        if (this.score >= 90) {
	            showMessage = '优秀'
	        } else if (this.score >= 80) {
	            showMessage = '良好'
	        } else if (this.score >= 60) {
	            showMessage = '及格'
	        } else {
	            showMessage = '不及格'
	        }
	        return showMessage
	   }
	}
})
</script>

用户登录切换的小案例

<div id="app">
	<span v-if="isUser">
		<label for="username">用户账号</label>
		<input type="text" id="username" placeholder="用户账号" key="username">
	</span>
	<span v-else>
		<label for="email">用户邮箱</label>
		<input type="text" id="email" placeholder="用户邮箱" key="email">
	</span>
	<button @click="isUser=!isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
	el: "#app",
	data: {
	    isUser: true
	}
})
</script>

问题：

如果我们在有输入内容的情况下切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了，
在另一个input元素中，我们并没有输入内容。

为什么会出现这个问题呢？

这是因为Vue在进行DOM渲染时，出于性能考虑，会会尽可能高效地渲染元素，
通常会复用已有元素而不是从头开始渲染
也就是说： Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了

解决方案：

如果我们不希望Vue出现类似重复利用的问题，就要通过方式来表达这两个元素是完全独立的，
不要复用它们可以给对应的input添加key属性
并且我们需要保证不同input中key属性的属性值不同，这样就不会被复用，而是重新创建。

v-show的使用

1.v-show的使用：

v-show的用法和v-if非常相似，都是决定一个元素是否渲染：

2.v-if和v-show对比：

*当条件为true时：

v-if和v-show都可以将元素渲染，显示出来。

*当条件为false时：

v-if不会显示元素，原因：包含v-if指令的元素根本不会存在DOM中
v-show不会显示元素，原因：因为它给该元素设置了一个行内样式 display：none
但它始终会被渲染并保留在 DOM 中
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
它也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

3.开发中选择用v-show还是v-if？

当需要在显示与隐藏之间切换很频繁时，使用v-show

当只有一次切换时，使用v-if

 <div id="app">
	<h2 v-if="isShow" id="aaa">{{message}}</h2>
	<h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好啊！',
            isShow: true
        }
    })
</script>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。