vue鼠标移入添加class样式,鼠标移出去除样式

最新推荐文章于 2024-04-23 10:36:46 发布
最新推荐文章于 2024-04-23 10:36:46 发布
阅读量7.3k 收藏 7
点赞数 1
分类专栏： vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiasohuai/article/details/80750333
版权 
<!DOCTYPE html>
<html>
<head>
	<title>Vue加class</title>
	 <meta charset="utf-8"/>
	 <style type="text/css">
	 	.classred{
	 		color:red;
	 	}
	 </style>
</head>
<body>
<div id="app">		
    <ul>
    	<li v-for="(item,index) in items" v-on:mouseover="addClassload(index)" v-on:mouseover="removeClassload(index)" v-bind:class="{ classred:classenable&&index==current}">{{item.title}}</li>
    </ul>
</div>
<script src="./vue.min.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
		  	name:'叶落森',
		  	current:0,
                        items:[
                            {title:'叶落森1'},
                            {title:'叶落森2'},
                            {title:'叶落森3'},
                            {title:'叶落森4'}
                        ],
                        classenable:false
		},
		methods:{			
                        addClassload(index){
            	            this.classenable=true
            	            this.current=index;
                        },
                        removeClassload(index){
            	            this.classenable=false
            	            this.current=index;
                        }
	        }	    
	})
</script>
</body>
</html>

姜无忧
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
01-21
鼠标移入添加class样式 HTML HTML绑定事件,加入或者移出class为active <div class=col-lg-3 v-on:mouseover=changeActive($event) v-on:mouseout=removeActive($event)> 流量套餐 </div> JS 这里除了active这个class需要动态添加或者减去,其他的皆是移入移出都需要的class methods:{ changeActive($event){
cursor属性 鼠标指针放在元素范围内时的光标形状
Gamin
11-06 714
/*默认 浏览器设置的光标*/ cursor: auto; cursor属性 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 e-re..
(css)鼠标移出样式不变
最新发布
nyf_unknow的博客
04-23 319
需求：列表鼠标移入切换样式，移出保持不变。
鼠标移入样式及自定义样式
m0_54741495的博客
01-23 861
css中的鼠标指针样式及自定义指针样式
vue鼠标移入添加class样式,鼠标移出去除样式(active)
热门推荐
陈小穗子
03-27 3万+
鼠标移入添加class样式 HTML HTML绑定事件,加入或者移出class为active &amp;lt;div class=&quot;col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan&quot; v-on:mouseover=&quot;changeActive($event)&quot; v-on:mouseout=&quot;removeActive($ev...
鼠标移上去的样式
oatmeal2015的博客
09-14 663
文本或其它页面元素   把 * 换成如下15个效果的一种：  hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。          下面是对这15种效果的解释。移动鼠标到解释上面，看看你的鼠标起了什么变化
鼠标移入后鼠标样式
前端攻城狮的博客
03-31 311
十字准心 cursor: crosshair; 小手 cursor: pointer; cursor: hand;（ IE5 hand） 沙漏 cursor: wait; 帮助 cursor: help; 无法释放 cursor: no-drop; 编辑 cursor: text; 可移动对象 cursor: move; 向上改变大小(North) cursor: n-resize; 向下改变大小(South) cursor: s-resize; 向右改变大小(East) cursor: e-resize;
vue实现鼠标移入移出事件代码实例
10-17
在Vue.js中，实现鼠标移入（mouseenter）和移出（mouseleave）事件是常见的交互功能，主要用于添加动态效果或提供额外的信息。以下是对标题和描述中提到的知识点的详细解释： 1. **Vue事件绑定**： 在Vue中，我们...
vue鼠标在表格中移入移出input显示隐藏
12-21
Vue鼠标在表格中移入移出到具体单元格时input显示隐藏，当input内有输入值的时候，input不再隐藏，输入完值后，鼠标移出，输入值自动显示在所在单元格中
鼠标移入效果制作
weixin_57762662的博客
10-28 815
打开DW，按下CTPL+N键新建一个HTML文档。 我们先在body标签打上ul标签，再在ul标签打上li标签和a标签，a标签里写一些内容。 在title标签下打一个style标签，然后在style标签里设置背景宽高，字体大小，背景颜色颜色，外右边距和居中。 下图是以上代码效果 接下来我们把li标签里的a标签给去了。 最后我们为li设置一个鼠标移入的样式，我们用（:hover）来设置鼠标移入的样式，我们可以设置自己喜欢的颜色和样式；这里我将li标签的移入效果写为了背
实现鼠标移上去变样式
weixin_34226182的博客
12-01 553
<style>.table_weibo_list tr:hover{ background:#eeeeee; }</style> 转载于:https://blog.51cto.com/duai2010/1718466
如何利用VUE动态添加class样式
AshesO的博客
11-02 2023
看注释, 就可以理解原理 <body> <!-- 需求, 在每次点击li的时候, 当前的li添加class, 其余的li删除class --> <div id="app"> <ul> <!-- @click="getClass(index) 在每次点击li后调用getClass方法 --> <!-- :class="{'red':index==current}" 动态绑定class, 并且进行判断, 当
Vue框架鼠标经过添加类
m0_52173534的博客
09-02 703
在使用vue框架时，写js代码会习惯性用原生html里面的写法，获取dom元素，然后循环绑定事件，今天来说说vue框架的事件（dom元素的操作） 文章简介： 在vue中使用v-on来进行事件绑定，简写@， 循环使用v-for，并且一起把事件绑定了， 不用像原生js里，获取元素，再循环绑定事件， 方便了很多的同时，也会伴随许多未知的用法， 今天来讲讲怎么给鼠标经过的元素加上一个类，（加上红色边框） 主体内容： 先看代码 <ul> <li v-fo
vue鼠标移入移出添加去除class：
weixin_44261007的博客
11-12 399
<div class="product1" @mouseover="mouseOver($event)" @mouseleave="mouseLeave($event)" > </div> mouseOver($event) { $event.curren...
如何在 vue 中绑定 class 样式？
weixin_44616020的博客
03-02 341
可以是一个计算属性，或者是一个返回数组或对象的方法，来动态地生成 class 名称。可以传递一个数组，数组的每一项都是一个 class 名称。可以传递一个对象，对象的属性名是 class 名称，属性值为。指令来动态绑定 class 样式。，用来控制是否应用该 class。的值不为空，也将应用该 class。为 true，该元素将应用名为。为 true，该元素将应用名为。在 Vue 中可以通过。在上面的例子中，如果。在上面的例子中，如果。
Vue鼠标移入移出更改图片。
yzy103yzy的博客
01-05 1921
<style> .main { height: 300px; width: 100px; } .imgs { height: 100%; } .a { background-color: brown; width: 200px; height: 100px; } </style> <div> <div> <img class="imgs" :src="picture" /> </.
html设置鼠标移入移出样式,vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法...
weixin_34245171的博客
06-04 743
鼠标移入添加class样式HTMLHTML绑定事件,加入或者移出class为active流量套餐JS这里除了active这个class需要动态添加或者减去,其他的皆是移入移出都需要的classmethods:{changeActive($event){$event.currentTarget.className="col-lg-3 col-xs-6 paddingLeft com_marginBt...
鼠标移入显示房间信息
小叶
12-09 763
在做酒店管理系统的时候，有这样一个功能，鼠标移入房态图，就会把房态图里面的房间信息显示出来，让我们来看看这个效果是怎么实现的。 首先给每个if语句里面拼接一个并给他一个类。 代码如下： Css样式如下： 一开始这个是直接显示出来的，我们要设置它的属性为隐藏display：none，当我们的鼠标放上去这个里面的内容就显示出来。 在这里我写了两个鼠标移入事件，通过字符串的拼接来实现我们想要的效果，这里注意一个点：当鼠标移出时，要清空之前的内容。Javascript代码如下： 控制器方法如下：首先是鼠标移
vue 鼠标移入加class
05-15
在 Vue 中，可以使用 `v-bind:class` 指令来动态地绑定 class。你可以在模板中绑定一个计算属性，当鼠标移入时返回需要添加的 class，当鼠标移出时返回空字符串。 模板代码： ``` <template> <div @mouseenter="addClass" @mouseleave="removeClass" :class="computedClass"></div> </template> ``` Vue 代码： ``` <script> export default { data() { return { isHovering: false }; }, methods: { addClass() { this.isHovering = true; }, removeClass() { this.isHovering = false; } }, computed: { computedClass() { return { 'hover-class': this.isHovering } } } } </script> ``` 在这个例子中，当鼠标移入时，`isHovering` 的值会变为 `true`，此时 `computedClass` 计算属性会返回一个包含 `'hover-class'` 的对象，从而将 `hover-class` 这个 class 添加到 `<div>` 元素中。当鼠标移出时，`isHovering` 的值变为 `false`，此时 `computedClass` 计算属性会返回一个空对象，从而将 `<div>` 元素中的 `hover-class` class 移除。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值