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

最新推荐文章于 2024-04-14 10:00:00 发布
最新推荐文章于 2024-04-14 10:00:00 发布
阅读量4.3k 收藏 1
点赞数 3
分类专栏： Vue 文章标签： vue vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44154577/article/details/114380662
版权

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标签显示，反之则显示

渣渣圆
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Vue学习笔记——基础知识
m0_48180834的博客
08-20 148
一、Vue概述 Vue是一个MVVM视图层框架，只关注视图层，采用自底向上增量开发的设计，因此也是一套构建用户界面的渐进式框架。 首先了解以下原生js 原生js:国内的原生js一般指不用任何框架和库的js(例如：jQuery),保持了js特性的最基本的js vue和原生js（这里主要指的是jQuery）的区别： jQuery是DOM驱动框架，没有摆脱DOM操作，只是将原生js做了封装 Vue是数据驱动框架，实现0 DOM操作 这里举个比较形象的例子了解下原生js、jQuery、Vue的区别
Vue必会知识点——原理篇
weixin_45494904的博客
08-19 552
文章目录原理组件化和MVVMVue响应式虚拟DOM（Virtual DOM）和diff模板编译vue组件如何渲染和更新前端路由原理 原理 组件化和MVVM 组件的出现，就是为了拆分代码，以不同的组件划分不同的功能模块，有复用性 传统组件，只是静态渲染，更新还要依赖于操作DOM MVVM的数据驱动视图则可以专注于业务逻辑和数据的开发，利用双向数据绑定去更新视图。 Model-View-ViewModel 的缩写，Model代表数据模型，View代表 UI 组件，ViewModel 将Model 和View
vue底层原理： v-if
qq_36413371的博客
05-19 1819
这是一个递归遍历dom的属性（v-if）根据值进行删除元素，连接 vue中vue实现原理： Vue进行了如下转化template —> ast语法树 —> render函数，最后根据生成的render函数来生成相应的DOM，这里就不拓展讲了。在生成ast和render函数的时候，Vue对v-if这一类指令进行了解析。 参考连接 ...
原理篇---v-if和v-show
weixin_43390711的博客
06-10 707
一、应用场景 v-if：当组件中某块内容只会显示或者只会隐藏，不会因为页面上的操作再次改变显示状态时。 v-show：当组件中某块内容显示隐藏是可以变化时。 二、两者实现显示隐藏的方式 v-if：动态的向dom树中添加或者删除dom元素 v-show：通过设置dom元素的display属性 三、编译条件 v-if：惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时，才开始编译 v-show：在任何条件下都会被编译 ......
v-show和v-if的区别和使用场景（超级详细）
最新发布
贫僧法号依平
04-14 3227
是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。如果需要非常频繁地切换，则使用 v-show 较好。如果在运行时条件很少改变，则使用 v-if 较好。不管初始条件是什么，元素总是会被渲染。的时候不会触发组件的生命周期。有更高的初始渲染消耗；要复杂的多，因为还有。
基于VUE2 v-if、v-show指令源码分析及原生代码简单实现v-if、v-show指令
My_Soul_的博客
11-10 2201
源码分析vue2中的v-if和v-show指令，并通过原生js代码简单实现v-if和v-show指令
Vue-学习笔记-06 v-if详解
热门推荐
欢迎访问我的主页：https://www.bookbook.cc
07-25 2万+
文章目录一、Vue中的v-if 和 v-show1.1 v-if 决定是否渲染 基本使用：1.2 v-show 决定是否显示1.3 v-if 和 v-show的区别1.4 v-if 根据成绩返回评价二、小案例 点击切换登录的类型 一、Vue中的v-if 和 v-show v-if、v-else-if、v-else 这三个指令与JavaScript的条件语句if、else、else if类似。 Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件 v-if的原理： v-if后面的条件为fals
Vue 3 中 v-if 和 v-show 指令实现的原理（源码分析）
五柳
01-17 1万+
前言 又回到了经典的一句话：“知其然，而后使其然”。相信大家对 Vue 提供 v-if 和 v-show 指令的使用以及对应场景应该都滚瓜烂熟了。但是，我想仍然会有很多同学对于 v-if 和 v-show 指令实现的原理存在知识空白。 所以，今天就让我们来一起了解一番 v-if 和 v-show 指令实现的原理～ v-if 在之前 【Vue3 源码解读】从编译过程，理解静态节点提升 一文中，我给大家介绍了 Vue 3 的编译过程，即一个模版会经历 baseParse、transform、generate 这
vue学习笔记之v-if和v-show的区别
12-11
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS ...
VueBasicLearning:Vue 2.0学习笔记
03-16
4. **指令与修饰符**：Vue提供了一系列内置指令，如`v-if`、`v-for`、`v-bind`、`v-on`等，它们帮助你控制DOM。修饰符如`.prevent`、`.once`、`.sync`等则对指令行为进行修饰，增加更细粒度的控制。 5. **组件通信*...
Vue技术栈实现的云笔记项目，印象笔记的功能基本都实现.zip
10-21
该项目基于Vue技术栈实现了一个云笔记应用，名为“vue-evernote-master”，其设计灵感和功能特点借鉴了知名的云笔记服务——印象笔记。Vue.js作为前端框架，提供了强大的组件化开发能力，使得项目的结构清晰，代码...
mkw-vue-jddj-notes:视频教程笔记
03-30
4. **模板语法**：Vue3保持了与Vue2相似的模板语法，但增加了模板内的JS表达式支持，如`<template v-if="condition">`，并且可以使用`.`操作符访问对象属性。 二、Vue3新特性 1. **Teleport**：Vue3中的Teleport...
learning_note:学习笔记
04-11
【学习笔记：前端篇——基础词法】 在前端开发领域，掌握基础的语法和词法是至关重要的。这里我们主要探讨HTML、CSS和JavaScript的基础知识，它们构成了网页开发的三大支柱。 1. HTML（HyperText Markup Language...
v-if 与 v-show的区别及对生命周期的影响
SpringRolls的博客
05-23 1786
两者的区别 (1) v-if 的原理是根据判断条件来动态的进行增删DOM元素，只有v-if的值为true时,元素才会存在于html页面中； v-show是根据判断条件来动态的进行显示和隐藏元素，是通过修改DOM元素的display属性来实现的，无论v-show的值为true或者false,元素都会存在于html页面中。 (2) 只有v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的，如果出现多种条件场景的情况下，可以使用v-if来进行判断 (3) 如果需要非常频...
Vue条件渲染v-if v-show原理
qq_36582776的博客
11-04 342
条件渲染: 1.v-if 写法: (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式” 适用于:切换频书较低的场景。 特点:不展示的DOM元素直接被移除。 注意: v-if可以和:v-else-if、v-else起使用， 但要求结构不能被“打断”（几个使用的标签之间必须紧挨着）。 2. V- show 写法: v-show=" 表达式” 适用于:切换频率较高的场景。 特点:不展示的DOM元素未被移除，仅仅是使用...
Vue中v-if的特点以及代码实现
qq_66104156的博客
07-16 240
Vue中v-if的特点以及代码实现 1、v-if根据表达式的真假切换元素的显示或隐藏 2、本质是通过操作dom元素来切换显示状态 3、当表达式的值为true时，元素存在于dom树中；当值为false时，元素从dom树中移除 4、频繁的切换使用v-show，反之使用v-if，使用v-show的消耗小
Vue源码阅读（18）：v-if、v-else、v-else-if 指令的源码解析
f18855666661的博客
08-21 6176
前面的 17 篇文章对 Vue 底层的核心运行机制进行了解析，接下来，开始对 Vue 中的众多特性进行针对化的讲解。 首先讲讲大家在工作中经常用到的 v-if、v-else、v-else-if 指令，这些指令是在模板编译阶段实现的。 1，v-if v-if 的用法如下所示： <template> <div id="app"> <h1 v-if="isShow">Hello Vue h1</h1> </div> </t
vue 自定义指令 自己实现 v-if 和 v-show
^_^
08-01 4295
通过自定义指令实现v-if 和 v-show ，v-show 就是把当前元素 设置display:none / block 来控制显隐，而 v-if 来把当前页面元素是否删除
VUE指令及用法大全——（六、七）v-if、v-show 显示与隐藏的实现区别和原理
最初都是小白
05-08 1744
语法：v-if: / v-show: 作用以及实现原理：    1.v-if 和 v-show 的作用都是切换界面上元素的显示或隐藏的    2. v-if 的实现原理：通过动态创建或移除元素实现元素的显示与隐藏    3. v-show 的实现原理：通过动态切换元素的display样式，来控制元素的显示与隐藏 注意： v-if 有更高的切换消耗 而 v-show 有更高的初始渲染消耗-...
vue自定义指令实现v-if效果
05-01
Vue自定义指令是Vue提供的一种拓展语法，用于扩展Vue的功能。实现v-if效果，需要新增一个自定义指令，例如v-visible。主要思路是在指令中通过binding.value获取到值，对元素进行判断并修改样式。 具体实现步骤如下： 1. 在Vue实例的directive选项中添加v-visible指令： ```javascript Vue.directive('visible', { bind: function(el, binding) { // 绑定时立即执行一次更新 el.style.display = binding.value ? 'block' : 'none'; }, update: function(el, binding) { // 更新时根据值的变化修改样式 el.style.display = binding.value ? 'block' : 'none'; } }); ``` 2. 在需要使用v-if效果的元素上添加v-visible指令： ```html <div v-visible="show">这里是需要v-if的内容</div> ``` 3. 在Vue实例中设置show的值，控制元素的显示与隐藏： ```javascript new Vue({ el: '#app', data: { show: true } }); ``` 在执行完以上三个步骤后，就可以通过Vue自定义指令v-visible实现v-if效果了。 需要注意的是，v-visible指令是一种比较简单的实现方式，如果涉及到较为复杂的逻辑判断，建议使用Vue的计算属性computed或watch监听数据的变化，并在模板中根据计算结果动态渲染元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

渣渣圆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值