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><i :class="moduleList[index].moduleIconCss[0]+' enable'"></i></td>
                    <td class="enableNum" v-html="moduleList[index].moduleOrder"></td>
                    <td class="enableState"><i :class="moduleList[index].moduleIconCss[1]+' enableW'"></i><i :class="moduleList[index].moduleIconCss[2]+' enableR'"></i></td>
                </tr>
                <tr v-for="(item,childrenIndex) in item.children">
                    <td><i :class="item.moduleIconCss[3]"></i>{{item.moduleName}}</td>
                    <td v-html="item.moduleUrl"></td>
                    <td><i :class="item.moduleIconCss[0]+' enable'"></i></td>
                    <td class="enableNum" v-html="item.moduleOrder"></td>
                    <td class="enableState"><i :class="item.moduleIconCss[1]+' enableW'"></i><i :class="item.moduleIconCss[2]+' enableR'"></i></td>
                </tr>
                </tbody>
                
                这种多重for循环怎么点击改变tr的样式，比如背景色

•  

2017-11-08 提问

默认排序时间排序

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>
      <i :class="moduleList[index].moduleIconCss[0]+' enable'"></i>
    </td>
    <td class="enableNum" v-html="moduleList[index].moduleOrder"></td>
    <td class="enableState">
      <i :class="moduleList[index].moduleIconCss[1]+' enableW'"></i>
      <i :class="moduleList[index].moduleIconCss[2]+' enableR'"></i>
    </td>
  </tr>
  <tr
  v-for="(item,childrenIndex) in item.children"
  @click="changeTr(index,childrenIndex)"
  :class="{'otherColor' : clickIndex === index + '|' + childrenIndex}">
    <td>
      <i :class="item.moduleIconCss[3]"></i>{{item.moduleName}}</td>
    <td v-html="item.moduleUrl"></td>
    <td>
      <i :class="item.moduleIconCss[0]+' enable'"></i>
    </td>
    <td class="enableNum" v-html="item.moduleOrder"></td>
    <td class="enableState">
      <i :class="item.moduleIconCss[1]+' enableW'"></i>
      <i :class="item.moduleIconCss[2]+' enableR'"></i>
    </td>
  </tr>
</tbody>

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

 

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也行

•  评论
• 赞赏
• 编辑

陌路凡歌  7.3k

2017-11-08 回答

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

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

•  评论 · 2
• 赞赏
• 编辑

Peter  34

2017-11-08 回答

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

— forget · 2017年11月08日

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

— Peter · 2017年11月08日

 

提交评论

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