首页video标签v-if

video标签v-if

时间: 2023-09-10 22:12:45 浏览: 94

对vue中v-if的常见使用方法详解

使用过Vue的小伙伴一定使用过v-if 这个属性，但是这个属性主要是来干什么的呢,他得用途是那些？这里我总结了一下，v-if使用一般有两个场景： 1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行两个视图之间的切换下面我写了两个例子，是Vue官方的简单实例。第一个实例实现了 type等于不同值，A，B，C 三个元素的展示情况。第二个例子实现了，点击按钮实现两个视图的切换。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=

根据引用中提到的，当显示状态变化频繁时，应该使用v-show来保持树的稳定。而当显示状态变化较少时，可以使用v-if来减少树的节点和渲染量。根据引用中的需求描述，可以使用v-if来实现视频播放前自定义图片、添加遮罩、添加暂停按钮，并且不显示功能区。点击播放后再显示功能区。同时，也可以使用v-if来实现左右切换视频时的乱序重排，以及隐藏转发和点击回到顶部等功能。v-show则可以在需要控制dom的display属性时使用，因为它只是控制dom的显示与隐藏，而不会改变dom的生成与销毁。所以，在video标签上，可以根据不同的需求选择使用v-if或者v-show来实现相应的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [VUE中的 v-if和v-show的区别](https://blog.csdn.net/weixin_46102597/article/details/120938392)[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_2"}}] [.reference_item style="max-width: 50%"] - *2* [video标签的使用](https://blog.csdn.net/weixin_58860430/article/details/126524880)[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_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

阅读全文