vue：动态组件——实现当点击一个按钮时，显示相应的div，并将其他div都隐藏起来

原创已于 2023-09-08 16:57:49 修改 · 1.7k 阅读

0 GEO检测

收录于

当前文章被以下社区和专栏收录：

于 2023-09-08 16:57:04 首次发布

Vue高阶专栏收录该内容

19 篇文章 ¥9.90 ¥99.00

订阅专栏

本文介绍了如何使用 Vue.js 的动态组件功能，实现点击按钮时只显示相应<div>并隐藏其他所有<div>。作者强调了对知识产权的尊重，提醒读者不要进行未经授权的复制或发布。

作者：CSDN @ _乐多_

通过动态组件 (<component>) 来实现当点击一个按钮时，它将显示相应的<div>，并将其他<div>都隐藏起来。

请添加图片描述

文章目录

- - 一、代码

一、代码

<template>
  <div>
    <button @click="showComponent(1)">显示组件1</button>
    <button @click="showComponent(2)">

标签

#vue.js #javascript #前端

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_乐多_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

Vue.js 点击按钮显示/隐藏内容

06-21

如何使用vue进行按钮点击后指定区域内容隐藏，再次点击按钮隐藏内容显示。实现思路：首选需要设置一个属性为true(show:true)，然后使用v-if把show属性绑定到要显示与内容的标签身上，最后给点击按钮添加点击事件，当show属性为true就设置为false，为false就设置为true(this.show = !this.show)即可。

参与评论您还未登录，请先登录后发表或查看评论

vue实现select下拉显示隐藏功能【详细&&功能拓展】

热门推荐

**My Coding Family**

03-11

2万+

vue如何实现select下拉显示隐藏功能【详细&&功能拓展】

vue实现点击不同按钮展示不同内容

一杯清茶的博客

12-13

1万+

效果是：在同一个页面，点击不同按钮，展示不同内容（内容也是在同意页面）方法是：借助v-show渲染不同的class属性步骤： 1.先写两个按钮 <div class="right1"> <button class="btn_anniu" @click="change(0)" :class="{ newStyle:0===number}">地图</button> <button class="btn_

点击一个div显示或者隐藏一个div（视频video）

夏天De风ly

04-24

969

首先看到两个div之间的关系，选择合适的方式：控制div：hover关系被控制div{ css样式修饰 } 1. 空格分隔——控制子元素 2. +分隔——同级元素（兄弟元素） 3. ~分隔——控制就近元素下面的列子是一个div里面放了video和一个div，当鼠标经过父div显示子div。 <html> <head> <meta...

Vue中如何实现点击按钮显示内容，点击内容或内容之外的区域隐藏内容

weixin_44747173的博客

01-23

7569

Vue中如何实现点击按钮显示内容，点击内容或内容之外的区域隐藏内容代码： <template> <div @click="showBox = false" class="box"> <button @click.stop="showBox=true">点击显示内容</button> <div class="box1" v-show="showBox">我是显示的内容</div> <div

在html中引入vue，实现点击不同的按钮有不同的内容显示

qq_70486619的博客

10-23

1312

在这个修改后的示例中，我们使用了`v-for`指令来动态渲染按钮，按钮的标签和内容通过`buttons`数组中的数据进行绑定。当点击按钮时，依然会触发`showContent`方法，根据按钮的`content`属性来显示不同的内容。自己写的时候遇到的一点点小困难，做此记录，希望对大家有帮助。

vue 自定义的通用的表格组件（使用div）

weixin_46328739的博客

12-21

2562

条件渲染使用了 v-if 指令来根据条件判断是否渲染整个表格容器。样式类绑定：样式类绑定使用了 :class 绑定动态的样式类。。使用了 v-for 指令循环渲染表头的每一列。对每一列进行了样式设定，并且设置了点击事件处理函数。使用了 v-for 指令循环渲染表格的每一行和每一列。对每个单元格进行了样式设定，并且设置了点击事件处理函数。在表格右侧实现了固定列的功能，并根据条件判断是否渲染固定列的内容。使用了 @click 绑定点击事件处理函数。

vue控制循环出来的某个dom的显示与隐藏

NOyesNONO_的博客

07-28

2018

给每个目标dom都绑定了ref，ref名称是动态的，通过下标命名的，独一无二的。获取到这个dom并控制样式

el-select 两个选择器选择其中一个值，让另外一个不显示-----和控制按钮操作

weixin_56408993的博客

03-16

3243

我们用 v-if 控制两个值的隐藏，显示下面图片效果 1：我们需要 @change="TaskArr" 点击事件

【自用】Vue中实现一个滑动列表，点击按钮页面滑动

weixin_43936442的博客

10-29

272

横向列表，点击按钮可滚动，位于最左边或最右边时左侧按钮或右侧按钮不显示。

Vue+OpenLayers实现地图显示与隐藏的JavaScript技巧

CgbAutoit的博客

09-17

493

而Vue.js是一款流行的JavaScript框架，它提供了丰富的功能和灵活的组件。本文将介绍如何利用Vue和OpenLayers来实现地图的显示与隐藏，并附上相应的源代码。通过以上步骤，我们就实现了利用Vue和OpenLayers来显示与隐藏地图的功能。无论是在地图展示类网页还是Web应用中，这个技巧都可以帮助我们更好地控制地图的显示状态，提升用户体验。在上述代码中，我们创建了一个Vue实例，并在其中添加了一个按钮和一个地图容器。方法创建地图对象并将其显示在指定的容器中，如果地图对象已存在，则通过。

a标签 vue 动态点击_vue实战开发013:无缝轮播组件制作详解

weixin_39996798的博客

12-30

181

今天继续下一个功能，那就是轮播图，在首页我们经常可以看到一个轮播展示区域，今天我们就来实现这个功能，这里我看了很多别人写轮播，基本都是用JavaScript或者别人封装好的组件来实现的轮播功能，因为vue没法像JavaScript那样通过offsetleft来获取当前元素的偏移位置，所以在写组件滑动的时候总是力不从心，最后还是用JavaScript写或者别人封装的组件来实现，其实vue还是可以实现...

利用Vue实现分页组件

gyueh的博客

11-09

282

效果：参考文章：https://www.cnblogs.com/sebastian-tyd/p/7853109.html 功能描述： 1、单击页码跳转到相应的页面 2、可以在输入框中输入想要到达的页面 3、单击上一页和下一页按钮，可以实现前进和后退功能 4、当处于第一页时，不显示上一页按钮；当处于最后一页时不显示下一页按钮； html部分代码如下所示： <div id="app">...

Vue3 动态设置 ref

PinkCoder

11-18

5237

Vue3 动态设置 ref

vue directive全局自定义指令实现按钮级别权限控制

且听风吟的博客

02-04

1876

vue directive全局自定义指令实现按钮级别权限控制

简单的VUE图片切换

HelloWord176的博客

04-23

2288

实现的功能: 点击上一张下一张按钮实现图片上一张下一张的图片切换 ; 当图片显示为第一张时,上一张按钮消失,但图片为最后一张时下一张按钮消失; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...

Vue3 + AntV X6 实战：如何给流程图节点添加悬浮按钮和隐藏连接桩？