vue多重for循环怎么点击改变样式

ゝ一纸荒年。 2022-01-29 10:27 272阅读 0赞

# [vue多重for循环怎么点击改变样式][vue_for] #

问题对人有帮助，内容完整，我也想知道答案1问题没有实际价值，缺少关键内容，没有改进余地

<tbody v-for="(item,index) in moduleList">
 <tr>
 <td v-html="moduleList[index].moduleName"></td>
 <td v-html="moduleList[index].moduleUrl"></td>
 <td></td>
 <td class="enableNum" v-html="moduleList[index].moduleOrder"></td>
 <td class="enableState"></td>
 </tr>
 <tr v-for="(item,childrenIndex) in item.children">
 <td>{
 {item.moduleName}}</td>
 <td v-html="item.moduleUrl"></td>
 <td></td>
 <td class="enableNum" v-html="item.moduleOrder"></td>
 <td class="enableState"></td>
 </tr>
 </tbody>
 
 这种多重for循环怎么点击改变tr的样式，比如背景色

2017-11-08 提问

[默认排序][Link 1][时间排序][Link 2]

3 个回答

答案对人有帮助，有参考价值0答案没帮助，是错误的答案，答非所问

已采纳

<tbody v-for="(item,index) in moduleList">
 <tr 
 @click="changeTr(index,-1)" 
 :class="{'otherColor' : clickIndex === index + '|-1'}">
 <td v-html="moduleList[index].moduleName"></td>
 <td v-html="moduleList[index].moduleUrl"></td>
 <td>
 
 </td>
 <td class="enableNum" v-html="moduleList[index].moduleOrder"></td>
 <td class="enableState">
 
 
 </td>
 </tr>
 <tr
 v-for="(item,childrenIndex) in item.children"
 @click="changeTr(index,childrenIndex)"
 :class="{'otherColor' : clickIndex === index + '|' + childrenIndex}">
 <td>
 {
 {item.moduleName}}</td>
 <td v-html="item.moduleUrl"></td>
 <td>
 
 </td>
 <td class="enableNum" v-html="item.moduleOrder"></td>
 <td class="enableState">
 
 
 </td>
 </tr>
 </tbody>

data:{
        clickIndex: ''
    },
    methods:{
        clickTr(index,childrenIndex){
            this.clickIndex = index + '|' + childrenIndex
        }
    }

[2017-11-08 回答][2017-11-08]

答案对人有帮助，有参考价值1答案没帮助，是错误的答案，答非所问

不懂你的意思，是点击后添加一个active颜色，其余tr颜色重置吗？还是点一个添加一个颜色，其余的不会重置。前者的话类似于

<ul class="list">
 <li v-for="(item,index) in list" @click="aaa(index)" :style="{'background':activeindex===index?'red':''}">{
 {index}}</li>
 </ul>
 data:{
 activeindex:'' 
 } 
 aaa:function(n){
 this.activeindex = n;
 }

后者的话  
moduleList里面加加一个控制颜色的属性，绑定:class="\{'red':item.color\}"就行了，当然直接绑style也行

*  评论
 *  赞赏
 *  编辑

[![4273039853-5a48e5bd80587_big64][]][4273039853-5a48e5bd80587_big64 1]

[陌路凡歌][4273039853-5a48e5bd80587_big64 1] ![rp.svg][] 7.3k

[2017-11-08 回答][2017-11-08 1]

答案对人有帮助，有参考价值0答案没帮助，是错误的答案，答非所问

能用css实现的就用css实现, 不能用css的就用viewModel实现,就是点击的时候改变当前这条数据,然后在渲染的时候判断数据

*  评论 · 2
 *  赞赏
 *  编辑

[![982912216-59b639d76c9a3_big64][]][982912216-59b639d76c9a3_big64 1]

[Peter][982912216-59b639d76c9a3_big64 1] ![rp.svg][] 34

[2017-11-08 回答][2017-11-08 2]

我想用点击改变class的方式，但是由于多重for循环，取到的index总是会渲染多个，请问可以写个例子吗

— [**forget** ][forget_]· 2017年11月08日

思路是这个思路,多重循环就会有多个index,这个index主要是用来改变指定位置的数据用的

— [**Peter** ][982912216-59b639d76c9a3_big64 1]· 2017年11月08日

提交评论

×评论支持部分 Markdown 语法：`**bold**``_italic_``[link](http://example.com)``> 引用``` `code` ```- 列表`。  
同时，被你 @ 的用户也会收到通知

[vue_for]: https://segmentfault.com/q/1010000011911565
[Link 1]: https://segmentfault.com/q/1010000011911565#answers-title
[Link 2]: https://segmentfault.com/q/1010000011911565?sort=created#answers-title
[2017-11-08]: https://segmentfault.com/q/1010000011911565/a-1020000011912860
[4273039853-5a48e5bd80587_big64]: /images/20220129/8e450a93a1ef4f4281f2c4e7e057b45e.png
[4273039853-5a48e5bd80587_big64 1]: https://segmentfault.com/u/molufange
[rp.svg]: https://cdn.segmentfault.com/v-5cc2cd8e/global/img/rp.svg
[2017-11-08 1]: https://segmentfault.com/q/1010000011911565/a-1020000011912916
[982912216-59b639d76c9a3_big64]: /images/20220129/4fcf1bede90444198896fd68bcba80de.png
[982912216-59b639d76c9a3_big64 1]: https://segmentfault.com/u/peter_59b6385a9d9e3
[2017-11-08 2]: https://segmentfault.com/q/1010000011911565/a-1020000011911641
[forget_]: https://segmentfault.com/u/forget_59f6c656d25ba