Question

我想在单击el-radio时更改li类成为活动类列表，并且当活动背景类列表为蓝色时。

这是我的代码：

ul class="list-class">
    <li v-for="(item, index) in dataList" :key="index">
      <div class="row">
        <div class="col-md-1">
          <el-radio v-model="radio" :label="item.id">
            <span></span>
          </el-radio>
        </div>
        <div class="col-md-11">
          {{ item.name }}
        </div>
      </div>
    </li>
  </ul>

这里是我的小提琴：https://jsfiddle.net/dede402/38mn5y9q/

Answer 1

将:class="{'active':radio===item.id}"添加到v-for迭代器

  <template>
      <ul class="list-class">
        <li v-for="(item, index) in dataList" :key="index" :class="{'active':radio===item.id}">
          <div class="row">
            <div class="col-md-1">
              <el-radio v-model="radio" :label="item.id">
                <span></span>
              </el-radio>
            </div>
            <div class="col-md-11">
              {{ item.name }}
            </div>
          </div>
        </li>
      </ul>
      <pre class="pre-item">radio = {{ radio }}</pre>
  </template>

提琴：https://jsfiddle.net/38mn5y9q/4/

VueJs-Element UI：如何更改活动类的el-radio

1 个答案: