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

半生的救赎 2020-02-21 12:03:57

如：有N个同类型li元素，实现在click或mouseover其中一个li元素时，只改变当前元素的样式或属性而其他的li元素不触发事件。

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

在线等大佬，感谢感谢~

...全文

685 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

半生的救赎 2020-02-21

打赏
举报

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样式功能统一，但是触发其中一个的时候其他的不会同时变化

半生的救赎 2020-02-21

打赏
举报

引用 2 楼天际的海浪的回复:

事件只会在当前元素触发。一般在事件函数中用this就可以访问当前元素。但对于vue而言，我想你的问题不在事件上，是在元素样式或属性的绑定上。你可能是为所有li元素的样式或属性绑定了同一个数据对象的属性。当这个数据对象的属性改变时，所有li元素的样式或属性就会一起变化。只要对不同li元素绑定不同数据对象的属性就可以了。

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

jio可 2020-02-21

打赏
举报

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>

天际的海浪 2020-02-21

打赏
举报

事件只会在当前元素触发。一般在事件函数中用this就可以访问当前元素。但对于vue而言，我想你的问题不在事件上，是在元素样式或属性的绑定上。你可能是为所有li元素的样式或属性绑定了同一个数据对象的属性。当这个数据对象的属性改变时，所有li元素的样式或属性就会一起变化。只要对不同li元素绑定不同数据对象的属性就可以了。