vue中 v-if和v-show的理解和实例使用

相同的地方:v-if与v-show都可以动态控制dom元素显示隐藏
不同的地方:如果v-if指令的值为假,那么这个元素不会被插入DOM。
举个例子:
V-if

    <div v-if = "true">one</div>
    <div v-if = "false">two</div>

在浏览器生成的内容如下:

  <div>one</div>

和v-show指令比较一下,改指令使用css样式控制元素的显示/隐藏。

 <div v-show= "true">one</div>
 &
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vuev-if是用来控制元素的显示与隐藏的。通过给元素添加v-if指令,并传入一个表达式,当表达式为真时,元素会被渲染出来,当表达式为假时,元素会被移除DOM树。 例如,在一个Vue实例,我们可以使用v-if来根据条件来控制元素的显示。比如,我们有一个age变量,当age大于等于35时,显示一个年龄大小的标题,否则不显示。可以像这样使用v-if指令: ``` <div id="app"> <h2 v-if="age>=35">年龄大小</h2> </div> ``` 在上述的例子,当age的值为40时,标题会被渲染出来,否则不会显示。 另外,v-show也可以用来控制元素的显示与隐藏。与v-if不同的是,v-show只是通过修改元素的CSS属性display来实现的,所以元素始终存在于DOM树,只是在显示与隐藏之间切换。 比如,在一个Vue实例,我们可以使用v-show来切换一个段落的显示与隐藏。可以像这样使用v-show指令: ``` <div id="app"> <input type="button" value="切换显示" @click="toggleIsShow"> <p v-if="isShow">兮动人</p> <p v-show="isShow">兮动人 v-show 修饰</p> </div> ``` 在上述的例子,初始时isShow的值为false,所以第一个段落不会显示,第二个段落会被渲染出来。当点击按钮时,toggleIsShow方法会被调用,isShow的值会取反,从而切换第一个段落的显示与隐藏。 需要注意的是,v-if和v-show有一些区别。v-if是惰性地渲染元素,即当条件为假时,元素不会被渲染出来。而v-show会渲染所有元素,并通过CSS属性display来控制显示与隐藏。所以,如果需要频繁切换元素的显示与隐藏,可以使用v-show,如果只是在特定条件下显示元素,可以使用v-if。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vuev-if基本使用](https://blog.csdn.net/qq_41684621/article/details/113783711)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [对vue v-if v-else-if v-else 的简单使用详解](https://download.csdn.net/download/weixin_38678394/13981051)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值