vue学习：2、条件判断

最新推荐文章于 2024-07-25 07:15:00 发布

weixin_34281477

最新推荐文章于 2024-07-25 07:15:00 发布

阅读量447

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/qingqingdego/blog/2353876

版权

2019独角兽企业重金招聘Python工程师标准>>>

条件语句

v-if 和 v-show 区别

http://www.runoob.com/vue2/vue-if.html

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。若其原有样式设置了 display: none 则会导致其无法正常显示。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

简单理解：v-if 是动态添加，v-show 仅是隐藏 / 显示

一段别人的应用代码样例，用来理解感觉很好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 条件语句 </title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<style>
			body {
			  background: #000;
			  color: cyan;
			}
			.edit {
			  border: solid;
			  border-width: 3px;
			  border-radius: 5px;
			  border-color: #f44336;
			  font-size: 70px;
			  padding: 5px;
			  margin: 10px;
			}
			img{
			  width: 80px;
			  height: 80px;
			}
			h2 {
			  margin-left: 15px;
			}
		</style>
	</head>
	<body>
		<div id="vApp">
			<!--v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用-->
			<input type="text" class="edit" placeholder="判断输入的字符长度" v-model="inp">
			<h2 v-if="calLen(inp)>10">输入的字符长度大于10</h2>
			<h2 v-else-if="calLen(inp)>5">输入的字符长度大于5</h2>
			<h2 v-else-if="calLen(inp)>0">输入了字符</h2>
			<h2 v-else>没有输入字符</h2>
			<div>
				<!--也可以使用 v-show 指令来根据条件展示元素-->
				<img src="https://static.runoob.com/images/mix/Vue-c1404f26d2d428847a0dbbfe214914c207716c77/asset/img/ic_user.png" v-show="calLen(inp)<=0">
				<img src="https://static.runoob.com/images/mix/Vue-c1404f26d2d428847a0dbbfe214914c207716c77/asset/img/ic_question.png" v-show="calLen(inp)>0">
				<img src="https://static.runoob.com/images/mix/Vue-c1404f26d2d428847a0dbbfe214914c207716c77/asset/img/ic_stop.png" v-show="calLen(inp)>5">
				<img src="https://static.runoob.com/images/mix/Vue-c1404f26d2d428847a0dbbfe214914c207716c77/asset/img/ic_info.png" v-show="calLen(inp)>10">
			</div>
		</div>
		<script>
			new Vue({
			  el: '#vApp',
			  data: {
				inp: ''
			  },
			  methods: {
				calLen: function (n) {
				  if (!n) {
					return 0;
				  } else {
					return n.split('').length;
				  }
				}
			  }
			})
		</script>
	</body>
</html>

转载于:https://my.oschina.net/qingqingdego/blog/2353876