8.条件渲染指令

最新推荐文章于 2023-08-14 16:47:19 发布
最新推荐文章于 2023-08-14 16:47:19 发布
阅读量243 收藏
点赞数
分类专栏： Vue笔记 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/potato123232/article/details/129500490
版权

目录

1  v-if v-show

2  v-if v-else-if v-else

1  v-if v-show

v-if与v-show都可以控制DOM的显示与隐藏

  • 由于flag是布尔值，所以这里可以直接写 v-if="flag"

当flag为true的时候，v-if与v-show控制的div都会被显示出来

当flag为false的时候，他们都会被隐藏

  • 如果数据是布尔值，可以点击右侧的checkbox改变true或false

v-if与v-show在视觉效果上是一样的，但他们的隐藏方法不一样

v-if是这个元素直接没了，v-show使用的是display:none

如果要频繁切换的话v-show的性能更好

如果你一开始不需要展示，那么v-if的初始加载速度要比v-show更快，因为少渲染了一个元素

v-if的语义要比v-show更强，即使会影响部分性能，我们也通常会使用v-if

2  v-if v-else-if v-else

Suyuoa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue: 条件渲染指令
m0_55435847的博客
05-06 650
1. v-if : (1) v-if="表达式" (2) v-else-if="表达式" (3) v-else="表达式" 适用于: 切换频率较低的场景。 特点: 不展示的DOM元素直接被移除 注意: v-if可...
浅析Vue.js 中的条件渲染指令
10-17
主要介绍了Vue.js 中的条件渲染指令，Vue.js 中的条件渲染指令可以根据表达式的值，来决定在 DOM 中是渲染还是销毁元素或组件。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考...
学习Vue：使用条件渲染指令（v-if,v-else,v-show）
weixin_42132860的博客
08-14 1047
在 Vue.js 中，条件与循环是实现动态交互界面的关键要素。通过使用条件渲染指令，您可以根据不同的条件决定是否显示或隐藏特定的内容。v-ifv-else和v-show，以及它们的用法和区别。
Vue.js条件渲染指令v-if及v-show
m0_61961937的博客
04-21 6600
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
vue条件渲染指令
m0_65063660的博客
08-27 1061
如图，v-if的元素被移除，v-show则使用display隐藏。添加或移除 style="display: none;v-if 指令一起使用，否则它将不会被识别！v-if 指令一起使用，否则它将不会被识别！按需控制 DOM 的显示与隐藏。注意：v-else-if 指令。动态地创建或移除DOM 元素。注意：v-else 指令。......
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
boxuestudio的博客
02-21 9313
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
vue.js实现条件渲染的实例代码
01-19
vue 的条件渲染，仍旧依赖于指令系统，下面逐个介绍： （1）v-if <div v-if=c1>c1 ...... var app = new Vue({ el: '#app', data: { c1: false } }); 当 c1 为真值的时候，渲染出 v-if 所绑定的元素，否则...
Vue.js教程视频（09）.第8节 条件渲染.mp4
06-19
Vue.js教程视频系统，共16个视频，内容如下： 01.序言 vue.js介绍 ...09.第8节 条件渲染 10.第9节 列表渲染 11.第10节 事件绑定 12.第11节 表单输入绑定 13.第12节 组件基础 14.第13节 组件注册 15.第14节 单文件组件
vue.js声明式渲染和条件与循环基础知识
12-29
vue.js声明式渲染和条件与循环的具体内容，分享给大家 绑定 DOM 元素文本值 html代码： {{ message }} JavaScript代码： var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 运行结果...
vue基本语法讲解.pdf
05-11
5. 条件渲染指令： * v-show * v-if * v-else-if 6. 列表渲染指令： * v-for 四、计算属性（computed） 五、监听器（watch） 六、过滤器（filter） 七、组件 1. 组件的使用： * import 导入 * components ...
Vue----条件渲染指令
emmmm.....
04-29 1328
文章目录3.8 条件渲染指令3.8.13.8.2 v-else v-else-if 3.8 条件渲染指令 条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是： v-if v-show <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=dev
条件渲染指令
Double_ch1的博客
03-02 115
条件渲染指令 v-if
前端练习题目--不定时分享
欣欣酱博客
02-09 1489
关于Vue组件生命周期说法错误的是（） 在data中的对象的某个属性和input双向绑定，修改input的值，在deforeDestroy中获取的值是修改过后的值 父子组件生命周期的执行顺序是父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、父亲mounted、孩子mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroye...
vue分支循环结构
qq_45104931的博客
02-24 240
v-if 因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。 下面展示一些代码片。 <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> v-if v
Vue学习——条件渲染与列表渲染指令（14）
Hoorus的窝
05-12 434
日常学习
vue学习：条件渲染指令
sayoko06的博客
12-14 397
一、v-if  v-else-if  v-else &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/ja
Vue 条件渲染指令
秋殇阁
07-19 3029
和JavaScript的条件语句一样，vue的条件指令可以根据表达式的值在dom中渲染或者销毁元素/组件,常用的条件指令有： v-if v-else-if v-else 其中v-if可以单独使用，v-else-if必须紧跟v-if，v-else必须紧跟v-else-if或者v-if。当表达式的值为true时，当前元素/组件及所有的子节点都将会被渲染，反之被移除。 如果一次判断的是多个元素...
Vue核心技术-4,条件渲染指令
BraveWangDev
08-15 1153
一,前言 这两天会出一份目录,对之前的几篇也会重新编排, 并补充一些遗漏的知识点,例如插值部分的过滤器等等... 在没有目录的情况下,暂时先按照自己的想法把知识点更新上来 这一篇介绍Vue的条件渲染指令,包括v-if,v-else-if,v-else,v-show 这些指令虽然都是根据条件对页面进行显示的指令,但功能和使用上还是很值得考究的 二,v-if,v-else-if,v-e...
vue 根据条件添加指令
最新发布
09-05
v-if和v-show都是Vue提供的用于条件渲染的指令，它们可以根据数据的值来决定元素是否被显示或隐藏。 使用v-if指令时，元素只有在条件为真时才会真正被渲染到页面中，如果条件为假，则该元素将不会被渲染。 使用v-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Suyuoa

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

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

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

打赏作者

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

抵扣说明：

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

余额充值