vue实现事件触发只作用当前的DOM元素-CSDN论坛

⋅vue实现事件触发只作用当前的DOM元素 ⋅关于在Eclipse中无法使用EL的问题 ⋅在classes里面增加子目录会影响在JSP中导入的包名称吗 更多帖子 关注私信空间博客 半生的救赎 本版专家分：0 结帖率 66.67%: 如：有N个同类型li元素，实现在click或mouseover其中一个li元素时，只改变当前元素的样式或属性而其他的li元素不触发事件。

问题：
1. 如果通过赋予每个li不同的id，然后分别针对其id创建N个vue实例，会造成大量的js代码重复，能否只要创建一个作用域在父级元素的vue实例就可以搞定？
2. 当N足够大时，分别赋予不同的id也很麻烦，能不能通过class，配合某（些）vue指令就可以直接搞定？

在线等大佬，感谢感谢~

0 2020-02-21 12:03:57

回复数 4 只看楼主引用举报楼主

⋅博客的富文本编辑器把html标签中 onclick 等事件的第一个字符 o 给自动改成了ο（编码是03BF），正常的 o 编码是006F

⋅用网站论坛的移动版发的图片都只有缩略图没有原图

⋅为什么我在问答区的回答总是莫名的消失？

更多帖子

关注私信空间博客

天际的海浪

本版专家分：153710

GitHub 绑定GitHub第三方账户获取

进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年总版技术专家分年内排行榜第七

银牌 2019年1月总版技术专家分月排行榜第二

铜牌 2018年10月总版技术专家分月排行榜第三
2018年9月总版技术专家分月排行榜第三
2018年8月总版技术专家分月排行榜第三: 事件只会在当前元素触发。一般在事件函数中用this就可以访问当前元素。
但对于vue而言，我想你的问题不在事件上，是在元素样式或属性的绑定上。
你可能是为所有li元素的样式或属性绑定了同一个数据对象的属性。
当这个数据对象的属性改变时，所有li元素的样式或属性就会一起变化。

只要对不同li元素绑定不同数据对象的属性就可以了。

0 2020-02-21 14:12:09

只看TA 引用举报 #2 得分 0

⋅此用户还没有发表过任何帖子 关注私信空间博客 jio可 本版专家分：11714 红花 2019年9月 Web 开发大版内专家分月排行榜第一 黄花 2019年10月 Web 开发大版内专家分月排行榜第二: hover直接写样式，点击记录一个值等于当前选中的值添加active样式，active和hover一样效果
data () {
  current: 0,
  list: [{id: 1, name: 'a'},{id: 2, name: 'b'}]
},
method: {
handleClick (item) {
   this.current = item.id
  // do sth
}
}
// 需要处理其他操作
<li v-for="item in list" @click="handleClick(item)" :class="{active: item.id==current}">{{item.name}}</li>
// 不需要处理其他操作
<li v-for="item in list" @click="current=item.id" :class="{active: item.id==current}">{{item.name}}</li>

0 2020-02-21 15:37:38

只看TA 引用举报 #3    得分 0

⋅vue实现事件触发只作用当前的DOM元素 ⋅关于在Eclipse中无法使用EL的问题 ⋅在classes里面增加子目录会影响在JSP中导入的包名称吗 更多帖子 关注私信空间博客 半生的救赎 本版专家分：0: 引用 2 楼天际的海浪的回复:
事件只会在当前元素触发。一般在事件函数中用this就可以访问当前元素。
但对于vue而言，我想你的问题不在事件上，是在元素样式或属性的绑定上。
你可能是为所有li元素的样式或属性绑定了同一个数据对象的属性。
当这个数据对象的属性改变时，所有li元素的样式或属性就会一起变化。

只要对不同li元素绑定不同数据对象的属性就可以了。

对，目前情况就是这样。但我的担心就是当li很多的时候，就得在js中手写对应多的数据对象，是这样嘛？

0 2020-02-21 16:24:29

只看TA 引用举报 #4 得分 0

⋅vue实现事件触发只作用当前的DOM元素 ⋅关于在Eclipse中无法使用EL的问题 ⋅在classes里面增加子目录会影响在JSP中导入的包名称吗 更多帖子 关注私信空间博客 半生的救赎 本版专家分：0

html布局类似下面情况：

<body>

	<div class="wrap">

		<ul class="article">

			<p></p>

			<li class ="btn" :style="color" @click.self="change">按钮</li>

		</ul>

		<ul class="article">

			<p></p>

			<li class ="btn" :style="color" @click.self="change">按钮</li>



		</ul>

		<ul class="article">

			<p></p>

			<li class ="btn" :style="color" @click.self="change">按钮</li>

		</ul>

	</div>

</body>

现在的需求就是li样式功能统一，但是触发其中一个的时候其他的不会同时变化

0 2020-02-21 16:30:35

只看TA 引用举报 #5 得分 0

vue实现事件触发只作用当前的DOM元素 [问题点数：20分]