Vue学习笔记——v-if实现原理

v-if<div id="app"><p v-if="isShow">v-if</p><h2 v-if="temperature>=35">热死了</h2><input type="button" value="切换" @click="toggleIsShow()" /><input type="button" v

渣渣圆

4396人浏览 · 2021-03-04 23:41:16

渣渣圆 · 2021-03-04 23:41:16 发布

v-if

<div id="app"> 
	<p v-if="isShow">v-if</p>
	<h2 v-if="temperature>=35">热死了</h2>
	<input type="button" value="切换" @click="toggleIsShow()" />
	<input type="button" value="+" @click="add()" />
	<input type="button" value="-" @click="sub()" />
	
	</div>
	<body>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					isShow:true,
					temperature:30
				},
				methods:{
					toggleIsShow:function(){
						this.isShow = !this.isShow;
					},
				
				add:function(){
					this.temperature ++;
					},
					sub:function(){
						this.temperature--;
					}
			   }
			})
		</script>

运行截图
在这里插入图片描述
通过浏览器审查发现

v-if是动态的向DOM树内添加或者删除DOM元素，当v-if值为false则页面不会有这个html标签显示，反之则显示

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^