美文网首页
vue行内绑定多个class :class

vue行内绑定多个class :class

作者: Hello杨先生 | 来源:发表于2020-01-11 12:17 被阅读0次
     <el-form-item label="车牌号" >
                        <div class="flex-left">
                          <div :class="[{'license_colorItemClick':license_colorIndex==i}  ,
                                      {'radiusFirst':i==0 },
                                      {'radiusLast':i==dialogForm.license_color.length-1}  ]"
                               class="license_colorItem flex-cen-xy"
                               @click="clickLicenseColor(i)"
                               v-for="(items , i ) in dialogForm.license_color"
                               :key="i">{{items}}</div>
                        </div>
      </el-form-item>
    
      //  业务查询
            //****************************************************************
            dialogImg:[
              {
                img:require('./../../assets/workOrder/stateIcon1.png'),
                text:'电子标签查询'
              },
              {
                img:require('./../../assets/workOrder/stateIcon2.png'),
                text:'黑名单查询'
              },
              {
                img:require('./../../assets/workOrder/stateIcon3.png'),
                text:'消费查询'
              },
              {
                img:require('./../../assets/workOrder/stateIcon4.png'),
                text:'车牌占用查询'
              }
            ],
            dialogVisibleSearch: false,//显示dialog
            license_colorIndex:0,//点击的车牌下标
            dialogForm:{
              license_code:'',  //车牌号
              license_color:['蓝色','黄色','黑色','白色','渐变绿牌','黄绿双拼','蓝白渐变','其他','绿色','红色',],//对话框里面的车牌颜色
            },
            //**********************************************************************
    
      .license_colorItem{width: 100px;height: 40px;border: 1px solid #C4CDD5;border-radius:0;color: #525C66;cursor: pointer;margin-bottom: 5px;}
      .radiusFirst{border-radius:3px 0px 0px 3px;}
      .radiusLast{border-radius:0px 3px 3px 0px;}
      .license_colorItemClick{border-color: #0B71DD;background:rgba(11,113,221,0.1);color: #0B71DD;}
    

    相关文章

      网友评论

          本文标题:vue行内绑定多个class :class

          本文链接:https://www.haomeiwen.com/subject/pyivactx.html