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

                <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的样式,比如背景色

回答:

<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
    }
}

回答:

不懂你的意思,是点击后添加一个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也行

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注