小白第六课 - checkbox

1. HTML部分

<div :class="[indNumber==index?'f_box_1':'f_box']" v-for="(item,index) in outNumberList" :key="index"  >
  <div :class="[indNumber==index?'f_content_1':'f_content']" ><input type="checkbox" v-model="numberIdList" :value="item"  :checked="item.status?item.status:''" ><span style="padding-left: 20px;">{{item.numberName}}</span></div>
</div>
  • 注意!最重要的是这句话:
<input type="checkbox" v-model="numberIdList" :value="item" :checked="item.status?item.status:''">
  • 其中 v-model=”numberIdList” 为已选中参数的集合,只要在data中设置好参数就ok了,:value=”item”为当前参数,
    :checked=”item.status?item.status:’’” 判断是否默认选中

2. CSS部分

  .f_content {
    color: #666666;
    font-size: 14px;
    line-height: 20px;
    width: 75%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .f_content_1 {
    color: #666666;
    font-size: 14px;
    line-height: 20px;
    width:75%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #1889fa;
    font-weight: 600;
  }
  .f_box {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 13px 0;
    width: 100%;
    padding-left: 30px;
  }
  .f_box_1 {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 13px 0;
    width: 100%;
    background: #eff5ff;
    padding-left: 30px;
  }
  .f_box:hover {
    background: #eff5ff;
  }
  .f_box:active .f_content {
    font-weight: 600;
    color: rgba(24, 137, 250, 1);
  }
  .f_box1 {
    float: right;
    margin-left: 6px;
  }

3. 效果图