vue2.0学习笔记(一)--部分内部指令(v-if,v-show)

v-if

根据指令后的值或表达式的布尔值来决定是否在页面上进行渲染工作,是否在DOM中生成元素。如果其值或表达式的布尔值为false,则DOM中没有生成元素。

v-else-if

需要和v-if命令搭配使用。当同时存在多个条件时,根据运算结果来确定是否显示。

v-else

需要配合v-if或者v-else-if使用,作为最后一个条件。

v-show

v-if一样控制元素的渲染。v-if是控制DOM元素的渲染,而v-show是通过控制DOM元素的display属性来控制渲染的。当指令后的值或表达式的布尔值为true时,display的值对应为block等类似的值;当值或表达式的布尔值为false时,display的值对应为none

v-if VS v-show

两者都能控制DOM元素的显示和隐藏,但是在使用v-if的时候,Vue会有一个局部编译或者卸载的过程,因为使用v-if的模板中可能包括数据绑定或者子组件,v-if是真的条件渲染,他能保证在条件切换时能合适的建立或者销毁条件快内的事件监听器和子组件。v-show在任何时间都渲染元素,只是基于css的简单切换
一般来说,v-if有更高的切换开销,v-show有更高的初始渲染开销。如果在运行时需要频繁切换现因状态的话用v-show比较好,运行时不会改变状态的话用v-if比较好。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-ifVue.js中的一个条件渲染指令,用于根据条件来决定是否渲染某个元素或组件。它的用法是将v-if指令添加到一个元素上,并将其值设置为一个布尔表达式。当布尔表达式的值为true时,该元素会被渲染出来;当布尔表达式的值为false时,该元素会被从DOM中移除。\[1\] 在Vue.js 2.0中,v-if指令可以与v-else-if和v-else指令一起使用,用于实现多个条件的判断。v-else-if指令用于在前一个条件不满足时判断下一个条件,v-else指令用于在前面的条件都不满足时渲染一个默认的元素或组件。\[2\] 另外,v-if和v-for指令可以同时使用,但是需要注意的是,v-for的优先级比v-if高。也就是说,当v-if和v-for同时存在于同一个元素上时,v-for会先被解析,然后再根据v-if的条件来决定是否渲染该元素。\[3\] 如果想要将v-for和v-if置于不同的标签上,可以使用template标签来包裹它们。template标签是一个占位符元素,不会在最终的渲染结果中显示出来,但可以用来包裹多个元素或组件。\[3\] 总结起来,v-ifVue.js中的条件渲染指令,用于根据条件来决定是否渲染某个元素或组件。它可以与v-else-if和v-else指令一起使用,用于实现多个条件的判断。在使用v-if和v-for时,需要注意v-for的优先级比v-if高。如果想要将v-for和v-if置于不同的标签上,可以使用template标签来包裹它们。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [在vuev-if和v-for的优先级](https://blog.csdn.net/weixin_47450807/article/details/125151173)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue 2.0——v-if 使用](https://blog.csdn.net/qq_38322527/article/details/125497488)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值