vue 文件中使用onmouser 和onmouserout 切换图片选中/未选中状态

最新推荐文章于 2022-01-12 20:40:51 发布
最新推荐文章于 2022-01-12 20:40:51 发布
阅读量354 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwf1225/article/details/110198834
版权

<div><img ref="img02" :src="showIMg02 ? imgUrl02 : imgUrl02ed" title="2D" @mouseover="$refs.img02.src=(require('../assets/image/2D@2x.png'))" @mouseout="$refs.img02.src=(require('../assets/image/2Ded@2x.png'))"/></div>

wwf1225
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
13 使用Vue + FormData + axios实现图片上传功能实战
xingyu_qie的专栏
06-21 1万+
文本通过Vue实例项目，使用axios + FormData实现图片上传做为例子，为下一节图书信息上传做准备
Vue 3结合element plus（问题总结二）之 table组件实现多选和清除选中（在vue3中获取ref 的Dom）
子时不睡的博客
04-15 2万+
Vue 3结合element plus（问题总结二）之 table组件实现多选和清除选中前言问题描述和原因问题解决小案例 前言 由于element plus组件里面使用的ts来写的，在用的时候属实有点小麻烦。 最后有个小案例，实现了多选和清除选中。希望对大家有帮助 先看官网Table组件的多选代码和效果。 <template> <el-table ref="multipleTableRef" :data="tableData" style="width: 100
关于vue的列表图片选中打钩操作
10-14
主要介绍了关于vue的列表图片选中打钩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE:解决iview菜单栏在刷新后显示的选中项与内容的不同
qq_38827988的博客
02-14 828
问题 如图,下图是正常情况 但我刷新后,菜单的子选项重新被选为了默认选项 如下图 解决 原理:我们只需要在页面刚开始加载时,通过不同的标识,直接设置Menu的active-name属性即可. 1.将Menu的active-name属性动态绑定 2.不同标识:这里我们使用路由路径来解决标识问题 这时,比如我们当前路径为/blog/manage,则我们的Menu的a...
JavaScript实现一个onmouserover实现鼠标移入和移除功能
qq_39494664的博客
02-16 2162
onmouser onmouserover的功能鼠标移入时执行相应函数 在鼠标移出时不起作用 那么我们如何用一个onmouserover既实现onmouserover的功能又实现onmouserout的功能？ 示例代码如下 var num = 0; for(var i = 0;i &lt; obj.length; i++) { obj[i].index = num; obj[num...
《鼠标事件【onmouser】及Div的显示与隐藏》
qq_35119220的博客
03-27 484
概述： 此文件可以初步实现网站中分类导航栏并以鼠标切换内容，后期内容的添加完善，需要您的参与，谢谢。 Web截图： 代码详情： 鼠标事件【onmouser】及Div的显示与隐藏 /* *controler选择器中div的样式属性 */ .con{ width:60px; h
mouseOver和mouseLeave事件在vue中的应用
weixin_43312391的博客
11-17 8861
目标：利用mouseOver和mouseLeave实现鼠标移入和移出时的不同效果。 初始状态： 点击最右侧按钮后的效果：（具体实现方法见下篇文章） 要完成的效果：在“已完成编辑 √”状态时，鼠标移入，出现如下效果，移出时恢复 具体实现： template中： <div class="resultType " ref="paintOne" :style="activeOne"> <span class="resu...
技巧2.1 vue3中鼠标点击 图片logo+文字 切换状态 两图片切换状态
yangyangdt的博客
01-12 3062
vue3中鼠标点击 图片logo+文字的 切换状态 鼠标点击两张图片的切换状态。
radio vue 选不中_Vue中radio单选框单击取消选中状态
weixin_35801916的博客
01-30 3021
咳咳。。。如标题所讲，看起来好简单的样子，但是这个需求在一个Vue架构的中大型项目中实现起来又貌似不是想象中的那么容易。以下是我的思路，愚见求各位大佬指教。分析：1、问题就是将input radio单选框改造成单击可以取消其选中状态2、单纯的对input radio进行js控制行不通，因为radio是通过v-repeat出来的，有很多个，如果每一个都去获取元素的话，执行效率太低，failed3、给...
vue复选框默认被选中_checkbox在vue中的用法小结
weixin_31282705的博客
12-22 2339
前言关于checkbox多选框是再常见不过的了，几乎很多地方都会用到，这两天在使用vue框架时需要用到checkbox多选功能，实在着实让我头疼，vue和原生checkbox用法不太一样，之前对于vue中用到过的checkbox也只是别人写好的组件，这次在自己实现时走了很多坑，特意写这篇文章记录下来，给后来者提供一个参考在这之前，先看看原生checkbox搭配jquery取值的用法游泳健身旅游$(...
Vue的Tab选项卡（点击切换图片）
Yueqin0512的博客
11-16 2066
效果：点击相对应的图片编号显示该图片,随机切换 css: 1.list-style: none;//去除列表默认小点 2.display: none;//图片初始都为隐藏 3.添加选中的名字的样式active 4.添加当前选中图片显示display: block; js: 1.利用遍历数组的对象添加相应名称和图片<li :key="item.id" v-for="(item,index) in list">{{item.title}}</li> <div :key="i
图片切换实现选中-未选中效果
weixin_30437337的博客
03-14 815
预先准备两张图片表示选中与未选中，当点击该元素时进行选中与未选中图片的切换，即可实现选中与未选中，然后根据该元素的src属性判断是否选中，然后判断该执行什么操作： <div class="way-choose "> <img class="choose radio-select" src="select.png"/> ...
vue中引入mousedown事件和document的mousemove事件模拟table滚动条
热门推荐
github_39532240的博客
12-14 3万+
vue项目中需要模拟表格的滚动条效果，涉及的事件就是mousedown、mouseup、mousemove；其中mousedown事件是绑定在滚动条上的，但是mousemove和mouseup事件则应该是绑定在document上，这样才能很好地实现滚动条的拖动；   首先在组件methods中定义两个函数： 1、获取鼠标位置坐标： getPos(ev){ let scro
vue项目点击图片切换
碉堡飞哥的博客
09-11 7813
未选择的按钮class为detail-btn，选择后class为detail-btn detail-selected （注意图片变换下） html: &lt;div class="detail-btn" @click="chooseOrder($event)"&gt;&lt;/div&gt; css: .detail-btn{ width: .43rem; height:...
在vue中使用鼠标事件@mousedown、@mouseenter等失效的解决办法，以及PC端长按实现
大前端薯条铭的博客
02-24 3万+
@mouseenter、@mousedown等鼠标事件[非鼠标点击事件]时，发现事件不触发，失效了 此时应该在@mouseenter、@mouseenter等鼠标事件加上native属性就好了 三个事件的触发时机 mousedown 当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生mousedown事件。 与click事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。 mouseup 当在元素上松开鼠标按键（左、右键均可）时，会发生mou...
vue鼠标移动上去提示_关于如何处理vue中鼠标悬停事件的详细说明
weixin_39836530的博客
12-22 5369
最后，在查看结果中，发现滑过鼠标事件将触发该事件，但它将闪烁并清除. 当鼠标停留在单元格上时鼠标滑过事件，遮罩层将消失并重复出现. 开关. 为了缓解这种情况，setTimeout也用于延迟显示和隐藏在changeMask中. 结果不理想，因此不推荐.在此方法中，仅需要保留上面代码的主要部分鼠标滑过事件，并且不需要ref和mouse事件. 掩模层的显示和隐藏主要由不透明度控制. 具体样式代码如下:该...
Vue中＜img＞标签图片想实现动态切换时，无法正常显示问题
头发掉光光的博客
10-22 4584
目录 问题描述 解决办法 问题描述 最近又在写项目，写到点赞这个地方的时候，想要实现一个图片的动态切换。本以为是一个很简单的问题，没想到却出了问题。 首先我们来看看不进行动态切换时的状态： <img src="../assets/image/踩.svg"> 此时的浏览器控制台显示的是这样的: 图片的路径和我们在编辑器中写的是有出入的。 而当我想要是实现动态切换时，我最...
vue 悬浮图标_Vue.js鼠标悬浮更换图片功能
weixin_39619481的博客
12-19 476
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片，大致实现出来的效果就是这样：这个在jQuery中是个很简单的事，但是在vue中我还是第一次实现。首先将所有的选中后图片都覆盖到没选中图片上html代码如下 css代码如下.right {float: left;ul {margin-left: 1px;li {display: inline-bl...
Vue项目中使用vue-i18n实现中英文切换教程
首先需要通过npm安装vue-i18n，然后在main.js中引入并配置，接着创建本地化的翻译信息，最后将i18n实例挂载到Vue根组件上，并在模板中使用$t()函数进行国际化文本的调用。实际应用中，可将不同语言的信息存储为单独...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值