您的位置：首页 > 编程技术 > js  >  利用vue控制元素的显示与隐藏

利用vue控制元素的显示与隐藏

 更新时间：2022年12月4日 14:29  点击：416 作者：是江流儿呀

 方法：

  • 使用 v-if 指令，通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素；
  • 使用 v-show 指令，通过设置DOM元素的display样式属性来控制显隐。

v-if 指令与 v-show 指令都可以根据值动态控制DOM元素显示隐藏，

v-if 和 v-show 属于Vue的内部常用的指令，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。

  • v-if 会直接删除元素
  • v-show 只是隐藏，只是简单地切换元素的 CSS 属性display。

v-show 示例： 

比如想要 隐藏 下面这个 按钮 那么给这个 div 加一个 v-show 的属性，名字我写的showButton， 

<div v-show="showButton">
      <Button>按钮</Button>
</div>

然后在 js 代码中 设置 showButton 的默认值为 false ，就是刚启动的时候，默认是不显示的，

后面如果想要 显示 这个 按钮 ，就直接设置 showButton 为 true 就好了

补充：vue 控制某个元素的显示或者隐藏之v-if属性

在此我定义两个属性 v-if=" "

 <div title="这是操作一"   v-if="operation1"></div>
 
 <div title="这是操作二"   v-if="operation2"></div>

js 代码：

new Vue({
        el: '#app',
        data: {
            operation1:false,
            operation2:false
         } 
        methods: {
           changeStatus(){
              if("你设置的条件"){
                  operation1 = true;
                  operation2 = true;  
              }
           }
        }
     })

解释：

默认 operation1和operation2的状态是false, 所以是隐藏

当你在changeStatus通过了某种条件，你就可以控制operation1和operation2的状态了。true为显示，false为隐藏。

总结

到此这篇关于利用vue控制元素的显示与隐藏的文章就介绍到这了,更多相关vue控制元素显示与隐藏内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/qq_61726905/article/details/126871904

[!--infotagslink--]

相关文章

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 方法一： 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13

  • C#隐式运行CMD命令（隐藏命令窗口）

    这篇文章主要介绍了C#隐式运行CMD命令（隐藏命令窗口）,本文实现在winform窗口中运行CMD命令,需要的朋友可以参考下...2020-06-25

  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01

  • 基于JavaScript实现表单密码的隐藏和显示出来

    为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03

  • jQuery 隐藏和显示 input 默认值示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...2014-06-07

  • C#中动态显示当前系统时间的实例方法

    想在网页中动态地显示当前系统的时间，找了好多，不过都是一些停在那里不动的。。。不过皇天不负有心人，终于让我找到了...2020-06-25

  • jquery插件实现鼠标隐藏

    这篇文章主要为大家详细介绍了jquery插件实现鼠标隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-14

  • jQuery实现广告显示和隐藏动画

    这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-05

  • C#实现动态显示及动态移除图片方法

    这篇文章主要介绍了C#实现动态显示及动态移除图片方法,对于C#的初学者了解图像操作有一定的帮助,需要的朋友可以参考下...2020-06-25

  • 解决druid监控页面SQL不显示的问题

    这篇文章主要介绍了解决druid监控页面SQL不显示的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-06-19

  • javascript点击按钮实现隐藏显示切换效果

    这篇文章主要介绍了javascript点击按钮实现隐藏显示切换效果，以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能，感兴趣的小伙伴们可以参考一下...2016-02-05

  • js控制TR的显示隐藏

    在很多现实的场景中，有的文本框我们希望在选择“是”的按钮之后才出现，这就需要js控制TR的隐藏和显示，如何控制，本文为大家揭晓...2016-03-07

  • PyQt5实现多张图片显示并滚动

    最近要做个网页图片批量下载工具，然后需要一个页面显示网页上的所有图片供用户勾选，再根据勾选的内容来下载指定图片，其中就涉及到要到同时显示多张图片，本文就来介绍一下...2021-06-11

  • JavaScript实现下拉菜单的显示隐藏

    这篇文章主要为大家详细介绍了JavaScript实现下拉菜单的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-30

  • R语言-在一张图上显示多条线的实现

    这篇文章主要介绍了R语言-在一张图上显示多条线的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06

  • C#实现让窗体永远在窗体最前面显示的实例

    这篇文章主要介绍了C#实现让窗体永远在窗体最前面显示,功能非常实用,需要的朋友可以参考下...2020-06-25

  • c#实现隐藏与显示任务栏的方法详解

    本篇文章是对c#中任务栏隐藏与显示的实现方法进行了详细的分析介绍，需要的朋友参考下...2020-06-25

  • android中ToolBar设置NavigationIcon图标不显示、失败、没反应，绝对管用

    ToolBar工具昨天介绍过相关的教程今天我们来看看关于android中ToolBar设置NavigationIcon图标不显示、失败、没反应，绝对管用问题的解决办法。 最近开发android ap...2016-10-02

  • C#实现将一个字符串进行翻转显示的6种方法

    下面小编就为大家分享一篇C#实现将一个字符串进行翻转显示的6种方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25

  • AI中的元素怎么隐藏和锁定？AI隐藏和锁定元素的方法

    AI里如何将一些需要保留的元素隐藏？比如页面中有颜色的中心线和文字，暂时性的隐藏起来，等做完所有东西，在要导出的时候再让其出现。请看下面的教程。 1、打开AI软件并...2017-01-22