vue项目如何做切换按钮，在网页同一区域显示不同的内容

最新推荐文章于 2024-05-27 23:24:18 发布
最新推荐文章于 2024-05-27 23:24:18 发布
阅读量1.5w 收藏 85
点赞数 22
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46613478/article/details/106220514
版权
本文介绍了如何在Vue项目中使用按钮切换同一区域的内容。通过创建两个按钮，根据点击状态改变数据属性`number`，结合:class指令动态绑定样式，实现在不同按钮点击下显示不同内容的功能。
摘要由CSDN通过智能技术生成

效果如下

功能：点击人气榜对应人气榜的排行，点击新品榜显示新品榜的内容
在这里插入图片描述

方法

1、首先写2个button按钮，并给定class作为按钮样式，点击之后添加新的样式

class=“btn_anniu” div原有的class
:class="{ newStyle:0===number}" 点击之后给div绑定新的class

 <div class="btn_switch">
      <button class="btn_anniu" @click="change(0)" :class="{ newStyle:0===number}">人气榜
最低0.47元/天 解锁文章
jingjinglove-
关注
  • 22
    点赞
  • 踩
  • 85
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
用Vue框架实现一个tab栏，切换不同的图片。
2301_79099480的博客
04-18 939
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
2024年Web前端最全【经验分享】显示文件扩展名，一个三非渣本的前端校招秋招之路
2401_84438654的博客
05-04 363
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总如何在.java文件和记事本之间通过改扩展名快速切换呢？首先打开此电脑（我的电脑）找到左上角的这个东西。
Vue3静态页面数据点击每一行数据跳转页面展示不同数据
weixin_42610671的博客
02-11 831
如果您想在 Vue3 中实现点击静态页面数据中的每一行数据跳转到另一个页面并展示不同数据，可以使用 Vue Router 进行实现。 首先，您需要在项目中安装 Vue Router，然后配置路由。在组件中，您可以使用 router-link 组件为每一行数据添加链接，并通过 to 属性指定跳转的路由。同时，您可以使用路由的 params 传递数据到目标页面，在目标页面中使用 this.$route...
vue3主题切换按钮与功能实现
qq_45820271的博客
05-27 550
记录一下样式切换按钮
Vue实现一个按钮切换显示不同的div内容
dadada_youzi的博客
11-27 7020
<template> <button type="primary" @click="click" icon="retweet" style="margin-left: 8px">{{message}}</button> <div v-show="isShowChart">图表内容</div> <div v-show="isShowTable">表格内容</div> </template> export def.
vue多次跳转同一页面显示不同内容
恍若c的博客
08-24 2768
如果在create中进行数据获取，那么在多次打开页面的时候，之后打开的页面数据都是和第一页相同的，这是因为data是在$vm实例创建之前就会进行赋值，而在第一次打开页面时，就已经创建了实例并对data进行赋值了，之后每次打开都不会再创建； 使用activated（这是和keep-alive协同使用的一个属性，如果没有设置keep-alive ，activated是不存在的），并在activated中进行Id获取和数据方法调用，可每次获得新的数据。 activated和created的区别：created是创
vue两个按钮切换_Vue.js点击切换按钮改变内容的实例讲解
weixin_39844590的博客
01-14 2704
代码实例：代码描述：点击切换按钮，来改变显示的内容，切换不同的单位。flag相当于一个开关，控制开关的改变，来切换不同的单位。同样适用于其他的切换内容实例，也可设置按钮点击显示隐藏等。vue点击切换改变内容new Vue({el:"#example",data:{flag:true,//单位切换开关btnText:'元/吨',},methods:{showToggle:function(){thi...
vue——点击按钮实现不同元素或组件显示和隐藏（切换）
热门推荐
weixin_42164004的博客
03-24 1万+
默认 再次点击组件一按钮组件一面板隐藏，按钮样式也发生改变 切换按钮后,面板发生改变 1、同一组件中实现不同元素切换 <template> <div class="page"> <div class="button"> <span @click="show(1)" :class="index===1? 'active':''">组件一</span> <span .
vue实现同一个页面某一位置进行不同组件切换展示效果
weixin_51935690的博客
07-27 6753
目录结构如图，在主页面home点击旁边导航切换不同组件在同一页面效果 2、动态路由<component:is="componentnext"></component>用于切换组件，改变componentnext的组件名字即可，利用了动态绑定:class来指定此组件时此导航选中颜色的变化 2.代码即注释如下 <template> <div> <!-- <Top-head></Top-head> --> .
70.Vue+elementUI 同一系统中设置点击按钮切换两种菜单展示
银河与猫的博客
11-16 2405
前言： 新开发的项目中，需要做该产品的两种不同类型的页面，对应的各自菜单又不相同，所以设置一个切换按钮，当切换后，刷新页面跳转到对应菜单的首页。 1.首先在系统头部添加下拉框切换车险和非车（默认展示车险） 2.默认展示车险，绑定值为1，切换到非车，绑定值就为2 3.在router.js和login.vue页面分别获取cookie值，判断selVal获取对应菜单数据 4.结合这几个页面的逻辑，就可以切换车险和非车的菜单了，接下来就是将菜单对应的文件名建好，不要混乱了就OK...
vue点击按钮实现简单页面的切换
12-28
本文实例为大家分享了vue点击按钮实现页面切换的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> [removed]...
vue 实现在同一界面实现组件的动态添加和删除功能
10-15
动态组件是 Vue 中用于在运行时切换不同组件的技术。这可以通过`<component>`元素配合`v-bind:is`指令来实现。`is`属性用于指定当前要渲染的组件名。例如： ```html <component v-bind:is="currentComponent"></...
vue项目中极验验证的使用代码示例
10-15
- 在 Vue 组件中，极验验证通常在用户触发特定事件（如点击登录按钮）时才初始化，以减少对用户体验的影响。 - 在同一页面内，如果多个组件都需要使用极验验证，可能需要额外处理，以防止重复初始化。 - 提供了 `...
解决vue请求接口第一次成功,第二次失败问题
10-14
在Vue.js应用中，有时会出现一个特殊的状况，即首次调用API接口时一切正常，但后续再次尝试调用同一接口时却出现失败。这个问题通常与HTTP请求的状态、数据的持久化、请求的类型（简单请求或非简单请求）以及跨域...
Vue中通过vue-router实现命名视图的问题
11-21
命名视图允许我们在一个路由配置中挂载多个组件，这些组件可以在同一页面的不同位置同时显示。在路由配置中，通过 `components` 属性来定义多个组件，每个组件可以有一个特定的 `name`。如果不设置 `name`，则默认...
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
最新发布
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
如何让element Vue在同一个vue页面用不同按钮响应不同的dialog显示不同内容？
06-04
您可以在Vue组件中使用Element UI的Dialog组件，并在每个按钮中绑定不同的事件处理程序，以响应不同的Dialog内容。以下是一个示例代码： ``` <template> <div> <el-button @click="showDialog1">打开对话框1</el-button> <el-button @click="showDialog2">打开对话框2</el-button> <el-dialog :visible.sync="dialogVisible1"> <span>这是对话框1的内容</span> </el-dialog> <el-dialog :visible.sync="dialogVisible2"> <span>这是对话框2的内容</span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible1: false, dialogVisible2: false, }; }, methods: { showDialog1() { this.dialogVisible1 = true; }, showDialog2() { this.dialogVisible2 = true; }, }, }; </script> ``` 在上面的代码中，我们定义了两个按钮，分别绑定了`showDialog1`和`showDialog2`方法。这两个方法分别将`dialogVisible1`和`dialogVisible2`设置为`true`，以打开不同的Dialog。在Dialog组件中，我们使用`:visible.sync`指令绑定了对应的`dialogVisible`状态，以实现Dialog的显示和隐藏。同时，我们还在每个Dialog中定义了不同的内容。这样，通过不同的按钮点击事件，我们可以在同一个Vue页面中显示不同的Dialog内容。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值