学习Vue（3）——条件语句

最新推荐文章于 2024-07-13 08:58:34 发布

二木成林

最新推荐文章于 2024-07-13 08:58:34 发布

阅读量627

点赞数

分类专栏： # Vue 文章标签： Vue

本文链接：https://blog.csdn.net/cnds123321/article/details/104022042

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

vue的条件判断是通过v-if、v-else、v-else-if、v-show指令来实现的。

v-if

其中v-if指令根据值（true或false）判断是否执行操作，但是只有为true时才执行v-if的指令，如果没有v-else的话那么久不执行当为false时的操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 这里根据复选框是否选中来决定下面这段文本是否显示 -->
			<input type="checkbox" v-model="isChecked" />是否显示
			<!-- 如果复选框被选中则isChecked是true则显示文本，如果复选框未被选中则isChecked是false表示下面这段文本不显示 -->
			<p v-if="isChecked">如果isChecked是true则显示该段文本，是false则不显示。</p>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					// 复选框是否选中,初始为选中表示true
					isChecked: true
				}
			})
		</script>
	</body>
</html>

浏览器展示：

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块。v-else是结合v-if使用，是为了处理当v-if为false时的操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 判断randomNum是否大于0.5，如果大于0.5输出v-if的操作，如果不大于0.5输出v-else，v-else指令没有任何值 -->
			<p v-if="randomNum>0.5">{{randomNum}} 大于0.5</p>
			<p v-else>{{randomNum}} 不大于0.5</p>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					// 产生一个随机数
					randomNum: Math.random()
				}
			})
		</script>
	</body>
</html>

浏览器显示：

v-else-if

用作 v-if 的 else-if 块。可以链式的多次使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="typeName==='石头'">石头</p>
			<p v-else-if="typeName==='剪刀'">剪刀</p>
			<p v-else-if="typeName==='布'">布</p>
			<p v-else>请重来</p>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					typeName:'石头'
				}
			})
		</script>
	</body>
</html>

浏览器展示：

注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

使用 v-show 指令来根据条件展示元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-show="typeName='石头'">恭喜你，答对了！</p>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					typeName: '石头'
				}
			})
		</script>
	</body>
</html>

浏览器展示：