使用Vue切换页面四个点击事件

最新推荐文章于 2023-12-02 11:41:47 发布
最新推荐文章于 2023-12-02 11:41:47 发布
阅读量1.3k 收藏
点赞数
文章标签： js css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kn1ght7z/article/details/115018946
版权

在Css做好的前提下,开始改动《点击切换页面》
在里有个大个的div用来id绑定Vue 设置一个img 可以用style绑定在data里面做Css 再用v-bind绑定图片 如图:
在这里插入图片描述
imgSrc作为显示图片 在data里面绑定选中的图片路径
后面四个需要选项的图像，img里面的src属性绑定图片路径,
还需要分别绑定不同的点击事件用来互动和绑定class作为选中的标识
在这里插入图片描述
绑定class的方式是使用对象{'如果问题正确则实行这个class’这个问题是否正确} 在data里面表达
在这里插入图片描述
点击事件则是分别设置一个@click
在这里插入图片描述
一个点击一个图片,虽然成功了但是不够方便

四分之三的雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue案例--点击按钮切换页面
qq_58167492的博客
10-11 4213
vue2做一个页面切换效果
vue tabs实现页面切换
09-11
类似easyui的tabs实现页面切换，之前使用iframe，vue里面ie的兼容不是特别友好所以改为route-view
点击导航栏切换页面
03-24
这是一个运行在AS上的project，里面是点击导航栏切换页面的三种方式的moudle
vue中点击导航栏部分，页面切换
weixin_30236595的博客
11-05 6348
写页面的时候都会用到一些导航栏、点击不同的部分切换不同的页面、并且点击的时候更换颜色 代码自己简单的写一下：(vue) <nav> 　　<ul> 　　　　<li v-for="(item, i) in navData" :class="{ nav_li : active === i }" :key="i" @click="$router.push({ pa...
vue-动态切换组件 （点击事件，切换页面）
热门推荐
m0_56349322的博客
03-14 1万+
效果直白讲： 点击事件，切换页面 例子：假设是在 App 组件里，有两个 button 按钮，点击 button1 显示一个页面，点击 button2 显示另个一页面。 步骤： 这个是正常上下组件所展示的界面 这个是点击按钮发生页面跳转的效果 步骤： ...
使用vue-router切换页面时实现设置过渡动画
10-16
在Vue.js应用中，使用vue-router进行页面切换时，我们经常希望添加过渡动画来提升用户体验。这篇文章将详细讲解如何在vue-router中实现页面切换的过渡动画。 首先，我们需要理解vue-router的基本概念。Vue Router是...
vue实现页面切换滑动效果
10-15
在`router.js`中配置路由，创建四个页面（A、B、C、D），每个页面都有不同的背景色。同时，为每个页面添加对应的组件。 例如，对于页面A，创建一个名为`A.vue`的文件，包含模板、脚本和样式： ```html ...
基于Vue实现页面切换左右滑动效果
08-29
基于Vue实现页面切换左右滑动效果可以提高用户体验，通过使用transition组件、CSS3动画和Vuex状态管理，可以实现页面之间的滑动切换效果。同时，计算滑动方向和计算属性也都是实现该效果的关键组件。
vue实现app页面切换动画效果实例
08-30
Vue 实现 App 页面切换动画效果实例 ...本篇文章提供了一个完整的 Vue 实现 App 页面切换动画效果实例，包括路由配置、路由规则配置、路由变化监听、Transition 动画效果、路由回退、高级路由配置等方面的知识点。
vue页面切换到滚动页面显示顶部的实例
08-27
在开发Vue应用时，我们经常遇到页面之间切换的交互需求，比如从列表页过渡到详情页。在某些情况下，特别是移动端应用，用户可能在列表页滚动到非顶部位置，然后点击进入详情页，期望详情页能从顶部开始显示。本文将...
vue底部图标和页面切换
05-30
vue配合mint-ui 做简单的切换。自己学习编写，如果使用再工作上，有问题，概不负责
Vue实现active点击切换方法
08-27
下面小编就为大家分享一篇Vue实现active点击切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js实现左边导航切换右边内容
01-19
本文实例为大家分享了vue.js左边导航切换右边内容的具体代码，供大家参考，具体内容如下 <template> <div class=layout-container> <y> <div slot=nav></div> </y> <div class=w> <div class=content> <div class=account-sidebar> <div class=gray-box> <div class=box-inner> <ul class=account-nav> <li v-for=
vue二级菜单导航点击选中事件的方法
10-18
今天小编就为大家分享一篇vue二级菜单导航点击选中事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue中将点击事件和页面切换进行绑定
liulang68的博客
07-17 893
标签添加router属性 在页面中添加标签，它是一个容器，动态渲染你选择的router 标签的index值就是要跳转的router
【vue】点击导航菜单切换局部页面，打开展示默认栏目，页面刷新等问题
最新发布
m0_59925573的博客
12-02 2929
需要继续解决一些问题，问题一，进入页面的时候默认展示“订阅管理”这个子级的内容。问题二，在刷新的时候，选中的菜单不会改变（不会丢失）。(2)vue页面，他会根据当前地址栏的路径在这个组件的位置上给你展示。第二个问题，刷新之后保持不变，就是让activeIndex始终指向当前地址栏这个路径。对于问题一，重定向。也就是在进入该页面之前重定向到某个子级，。(1)在index.js中配置路由的时候作为导航页的子级。2.完成1之后，我们可以看到这个页面的基本结构如下图。
Vue实现导航栏切换
NAIYAnana的博客
05-12 2727
使用Vue @mouseenter 鼠标移入事件 @mouseout鼠标移出事件 实现导航栏鼠标移入移出效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="../public/vue.min.js"></script
Vue实现底部导航栏切换页面及图片
sout-lanys
12-13 9841
前言 刚进新公司，有幸接触到从前后端不分离到前后端分离的一个过程，最开始对vue不太熟悉，下班自学一周就开始做了，可能会有很多问题，若有写不好的地方大佬们可以提出。 一、实现效果 需求：vue底部导航点击切换图标 效果： 二、大概思路图 三、代码实现 index.js(vuex) import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { // 目
vue路由变化时，改变导航栏的样式并切换页面
m0_64205744的博客
04-18 3260
记录会遇到的问题，复习小笔记！ 各种导航栏适用，单机某个导航按钮，跳转另一个页面，并改变导航栏样式。 这里我用的是通过动态class和$route.path来实现tab样式的切换 导航栏页面 请自行解析，有问题留言哈 <template> <div> <ul class="hlist_content" v-show="isShow2"> <!-- <li v-for="(ite
提供vue完整代码，实现四个页面路由切换，并设置第一个页面为默认打开页面
05-18
以下是一个简单的 Vue.js 应用程序，其中包含四个页面路由切换，并设置第一个页面为默认打开页面的完整代码： ```html <!DOCTYPE html> <title>Vue Router Example <script src="https://unpkg.com/vue/dist/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值