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

最新推荐文章于 2024-05-10 00:28:51 发布
最新推荐文章于 2024-05-10 00:28:51 发布
阅读量1.5w 收藏 85
点赞数 22
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46613478/article/details/106220514
版权

效果如下

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

方法

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}">人气榜</button
最低0.47元/天 解锁文章
jingjinglove-
关注
  • 22
    点赞
  • 踩
  • 85
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
【Vue&ElementUI学习】根据不同tab项，显示不同页
m0_55126564的博客
03-30 1215
3个vue页面 main.vue, sim.vue, qube.vue main.vue可点击不同tab项，右侧显示不同页 按学习使用route实现 1. index.js引入vue文件，并配置路由 import Vue from 'vue' import Router from 'vue-router' import Login from '../pages/Login' import Main from '../pages/Main' import Sim from '../pages/
Vue.js点击切换按钮改变内容的实例讲解
10-18
今天小编就为大家分享一篇Vue.js点击切换按钮改变内容的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现同一个页面某一位置进行不同组件切换展示效果
weixin_51935690的博客
07-27 6587
目录结构如图，在主页面home点击旁边导航切换不同组件在同一页面效果 2、动态路由<component:is="componentnext"></component>用于切换组件，改变componentnext的组件名字即可，利用了动态绑定:class来指定此组件时此导航选中颜色的变化 2.代码即注释如下 <template> <div> <!-- <Top-head></Top-head> --> .
点击按钮切换div及其内容（两种方法：Vue指令方式、原生DOM操作方式）
最新发布
2301_76278747的博客
05-10 203
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】border: 0;/*选中时*/
vue多次跳转同一页面显示不同内容
恍若c的博客
08-24 2750
如果在create中进行数据获取，那么在多次打开页面的时候，之后打开的页面数据都是和第一页相同的，这是因为data是在$vm实例创建之前就会进行赋值，而在第一次打开页面时，就已经创建了实例并对data进行赋值了，之后每次打开都不会再创建； 使用activated（这是和keep-alive协同使用的一个属性，如果没有设置keep-alive ，activated是不存在的），并在activated中进行Id获取和数据方法调用，可每次获得新的数据。 activated和created的区别：created是创
jq如何改变html页面,jq同一页面内容切换
weixin_33806591的博客
06-03 797
$(function() {//选择标题显示初始显示内容及样式$('.right-content .right-item').eq(0).addClass('showcontent')$('.left-content > li').eq(0).addClass('active')点击时触发页面内容显示和active切换$('.left-content > li').click(func...
解决vue多个路由共用一个页面，路由传参不同，页面显示数据不同，重新加载数据
艾小逗
03-31 6028
解决vue多个路由共用一个页面，路由传参不同，页面显示数据不同，重新加载数据 配置 unitType判断路由 路由配置 router/index.js： children: [ { path: 'pilotUnit', name: 'pilotUnit', component: _import('pilotUnit/index'), ...
vue中局部组件切换
weixin_47517176的博客
06-08 1294
只有两个组件的话可以使用v-if,v-else/v-show； 多个组件切换使用的是，通过在data里定义一个componted，修改componentnext值来切换组件。
Vue实现页面切换
前端卷王小白的博客
05-11 1352
Vue-Router,路由页面切换
解决vue路由跳转同一页面，携带不同参数，页面不刷新的问题
等归,的博客
05-25 1923
Vue路由跳转同一个页面，携带不同参数，页面不刷新 跳转同一个页面，携带不同的参数，页面不变
vue+elementui导航跳转相同路由不同参数，请求后台数据页面不刷新的解决方法
weixin_44468194的博客
06-17 2446
适用类型 主页 左边是菜单list组件，右边是home组件 路由 APP(主动加载)，使用Index组件，然后重定向到Home 目标样式点击导航切换class组件显示内容 问题 一开始使用，将其加在每个选项上，改变Params的数值 结果只有home跳到class能正常使用，class路由再选择就报错 解决问题 可用不代表一定特别好，欢迎补充 1. list组件路由跳转修改 使用@click添加点击方法 <el-menu-item index="1-1" @click="toclass(
vue点击按钮实现简单页面的切换
12-28
本文实例为大家分享了vue点击按钮实现页面切换的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> [removed]...
vue根据条件不同显示不同按钮的操作
10-15
主要介绍了vue根据条件不同显示不同按钮的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现点击按钮切换背景颜色的示例代码
10-15
这样，我们可以通过不同的参数来区分不同的按钮。 3. **方法定义**：在`methods`对象中定义`changeBg`方法，它根据传入的参数来更新`time`和`increase`的值。这样，当点击按钮时，会根据当前点击的按钮更新相应的...
根据标签跳转到同一页面渲染不同结果
qq_45812595的博客
04-26 452
假如有一个tab标签 left 和 right 点击它们跳转到同一页面但是 渲染内容不同 1.思考可以通过v-if v-else 来判断渲染 但是path路径是一样的 可以考虑在跳转时传递参数query或者params来跳转 2.query在页面刷新时会数据丢失 且搭配path来使用 this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo}}) 取数据：this.$route.query.p
用Vue框架实现一个tab栏，切换不同的图片。
2301_79099480的博客
04-18 909
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
在vue中，js写左右按钮切换中间的内容，不循环
LJ_QWE的博客
09-29 827
css样式 .laboratory-lists{ min-width:10000000px; height:100%; line-height: 30px; position: absolute; top:0; left:0; } .box{ width:400px; overflow: hidden; height:30px; position:relative; } .laboratory-list{ text-al
【前端】实现Vue组件页面跳转的多种方式
码农研究僧的博客
02-09 7528
通过某个Button让页面多种方式跳转
vue3实现在某个div里面动态的切换页面
青莳的博客
11-24 589
【代码】vue3实现在动态的某个div里面切换内容。
如何让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、付费专栏及课程。

余额充值