vue 控制元素的显示和隐藏

news2025/1/25 9:05:06

 方法:

  1. 使用 v-if 指令,通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素;
  2. 使用 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 就好了

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407812.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

文档库开发之-vite打包优化

背景 首次进行组件库文档打包&#xff0c;遇到了一些ts打包报错和css打包警告&#xff0c;记录下处理过程。并且发现打包后的主包的体积过大&#xff0c;有一定优化空间 ts报错处理 当时有好奇为什么开发环境下都不报错&#xff0c;构建才产生这么多ts错误。大致猜想可能vite…

英雄联盟轮播图自动轮播

六月过去了&#xff0c;七月还会远吗&#xff1f;不知不觉到了六月底的最后一天。你好&#xff0c;七月&#xff01; 大家好&#xff0c;我是小陈陈呀&#xff0c;上次写了一篇英雄联盟轮播图手动轮播&#xff0c;当天晚上有很多大朋友小朋友私信小陈陈&#xff1a;可以在上次…

【微信小程序】一文读懂页面导航

&#x1f381;写在前面&#xff1a; 观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列又更新了呀&#xff0c;今天的内容是微信小程序的页面导航&#xff0c;非常重要&#xff0c;赶紧拿起小本本记起来呀&#xff01; 文章目录一&#xff0c;页面导…

【项目问题定位】前端请求不到资源报错ERR_CONTENT_LENGTH_MISMATCH的解决

文章目录问题简述问题背景问题定位初始报错定位好像是网络问题ERR_CONTENT_LENGTH_MISMATCH 200 是什么原因&#xff1f;原来是Nginx报错了为何没有权限&#xff1f;nobody的原因问题解决原因总结知识点问题简述 前端页面加载资源时&#xff0c;出现ERR_CONTENT_LENGTH_MISMAT…

前端异常:“Uncaught SyntaxError: missing ) after argument list“真的只是参数列表后面缺少 “)”?

案发现场 我们在写JS的时候&#xff0c;有时候报错"Uncaught SyntaxError: missing ) after argument list"&#xff0c;字面翻译过来的意思&#xff1a;语法错误: 参数列表后面缺少 )。 这真的就是缺少括号的意思吗&#xff1f;然而只是真的缺少括号才会出现这样的…

HTML的常见标签及用法

一、注释标签 形如&#xff1a;<!-- -->的格式就叫做注释标签&#xff0c;在代码中起到解释说明的作用。 二、标题标签 在HTML中有六种格式的标题标签类型&#xff0c;分别是h1,h2,h3,h4,h5,h6。对应的形式为&#xff1a; 三、段落标签 当文章需要分段时&#xff0c;使…

js除法取整(js除法向上取整)

Javascript取整问题。要求只要有小数存在就进一位。例如&#xff1a;2.1取3&#xff0c;3.1取4 var a 2.0; function parseNumber(number, splitChar) { var n number ; var s splitChar nullvar a 2.1; var b parseInt(a) 1; // b will be 3 parseInt是截掉尾数&#…

vxe-table表格合并单元格和编辑

//这是在vue上面引用vxe-table插件实现的&#xff0c;主要方法都设置在table中&#xff0c;mergeCells&#xff0c;tableData都是在vue页面的data初使化数据&#xff0c; :footer-method“footerMethod”&#xff1a;尾部数据&#xff0c;:merge-footer-items“mergeCells”&am…

vue通过url方式展示PDF方法总结

最近vue项目中遇到预览pdf出现乱码问题&#xff0c;尝试了各种办法受尽折磨&#xff0c;以此记录一下使用的几种方法 1.使用pdfjs-dist 插件&#xff0c;通过iframe标签显示 首先 npm install pdfjs-dist --save npm直接下载插件 npm install --save pdfjs-dist2.0.943&…

【vue 项目】有关cascader任选一级、字段名不同、同时获取value和label值、回显(推父节点)等问题解决

文章目录选择任意一级选项字段名转换最后一级数据为空显示暂无数据问题同时获取cascader的value和label值选择时双击两次才显示被选中&#xff08;单选选择任意一级组件&#xff09;Error in callback for watcher “options“: “TypeError: Cannot read property ‘level‘ o…

表单元素盘点第二弹<form><textarea>元素详细介绍

博主有话说&#xff1a;如果有描述错误之处请大家纠正。让我们可以一起学习一起进步。 个人主页&#xff1a;GUIDM主页 内容专栏&#xff1a;干货 此块内容为纯纯的干货&#xff0c;略显乏味枯燥&#xff0c;是笔记向的blog。如果觉得还不错&#xff0c;希望你可以一键三连&…

Vue2的响应式原理

--------Vue2响应式原理---------- 原理&#xff1a;通过数据劫持 defineProperty 发布订阅者模式&#xff0c;当 vue 实例初始化后 observer 会针对实例中的 data 中的每一个属性进行劫持并通过 defineProperty() 设置值后在 get() 中向发布者添加该属性的订阅者&#xff0c…

基于RuoYi若依vue的数据分页功能的前后端代码详解

目录 1.前端代码 1.1首先在前端会有一个 组件&#xff0c;为分页组件 1.2前端获取列表函数以及访问后端的URL与请求方式 1.3开发者工具查看前端访问后端信息 1.4开发者工具查看前端接收到后端的回应信息 2.后端代码 2.1接口 2.2接口内方法的代码 2.3后端Log输出如下 1.前…

IntersectionObserver API详解

过去&#xff0c;要检测一个元素是否可见或者两个元素是否相交并不容易&#xff0c;比如实现图片懒加载、内容无限滚动等功能时&#xff0c;都需要通过​getBoundingClientRect()​写大量的逻辑计算或者依靠scroll事件监听等性能很差方式来实现。 现在&#xff0c;依靠Interse…

Object.prototype.toString.call()的原理

今天在项目中看到了用Object.prototype.toString.call()这个方法封装的检测数据类型的工具。 但是浏览器搜索相关原理的好回答凤毛麟角&#xff0c;故而想记录一下&#xff0c;万一可以帮助到更多的新手呢&#xff1f;我的文章都是非常通俗易懂的&#xff0c;因为我写文章的时…

HTML页面知识点小总结(巨详细)

HTML基础知识点总结 文章目录HTML基础知识点总结一、 HTML页面主要的三大标签。二、 外部的CSS文件。三、外部的JavaScript文件。四、< body >标签中存放的内容。如果觉得写的不错的话点个赞支持鼓励一下吧&#xff0c;欢迎交流&#xff0c;谢谢啦~~~一、 HTML页面主要的…

前端知识点汇总

HTML介绍 HTML: Hyper Text Markup Language 超文本标记语言&#xff0c;用来做网页. 负责网页的框架结构布局.1993年 html 1.0 Tim Berners-Lee(蒂姆-博纳斯-李)&#xff0c;万维网之父1995年 html 2.0 IETF(互联网工程小组)1997年1月 html 3.2 W3C(万维网联盟)1997年12月 ht…

vue2:elementUI中Form 表单在特定情况下做动态rules添加删除

先看需求&#xff1a;&#xff08;不想看的直接拉到最后&#xff09; 【需求说明】 6、如状态为上架时&#xff0c;库存为必填&#xff0c;下架状态时&#xff0c;库存为可填&#xff0c;前面无星号 实现方法&#xff1a;使用this.$set()和this.$delete() 上代码&#xff1a;…

Vue2 + JSX使用总结

什么是JSX 摘自 React 官方&#xff1a; 它被称为 JSX&#xff0c;是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX&#xff0c;JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言&#xff0c;但它具有 JavaScript 的全部…

前端人必看的JS面试题汇总

面试是每一个前端人在求职过程中都需要面对的事情。在面试过程中&#xff0c;面试官没有办法通过实践操作去了解应聘者的技能水平&#xff0c;所以他们更多地会通过“八股文”的考察来判断你是否符合公司的招聘要求。所以作为一个前端人&#xff0c;在掌握好前端技能的同时&…