美文网首页
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