如：有N個同型別li元素，實作在click或mouseover其中一個li元素時，只改變當前元素的樣式或屬性而其他的li元素不觸發事件。
問題：
1. 如果通過賦予每個li不同的id，然后分別針對其id創建N個vue實體，會造成大量的js代碼重復，能否只要創建一個作用域在父級元素的vue實體就可以搞定？
2. 當N足夠大時，分別賦予不同的id也很麻煩，能不能通過class，配合某（些）vue指令就可以直接搞定？
在線等大佬，感謝感謝~
uj5u.com熱心網友回復：
事件只會在當前元素觸發。一般在事件函式中用this就可以訪問當前元素。但對于vue而言，我想你的問題不在事件上，是在元素樣式或屬性的系結上。
你可能是為所有li元素的樣式或屬性系結了同一個資料物件的屬性。
當這個資料物件的屬性改變時，所有li元素的樣式或屬性就會一起變化。
只要對不同li元素系結不同資料物件的屬性就可以了。
uj5u.com熱心網友回復：
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>
uj5u.com熱心網友回復：
對，目前情況就是這樣。但我的擔心就是當li很多的時候，就得在js中手寫對應多的資料物件，是這樣嘛？
uj5u.com熱心網友回復：
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樣式功能統一，但是觸發其中一個的時候其他的不會同時變化
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/92683.html
標籤：JavaScript
下一篇：提交表單，request.getParameter("title") 如果引數值title是中文，得出結果卻是空。。。。在線等待~！