關於單選切換的問題,vue動態綁定類名的方法

sexAll: [
        {
          name: "男",
          isAshow: true
        },
        {
          name: "女",
          isAshow: false
        }
      ],

 

想法是，先便利數組，獲取到裏邊可以更改是否顯示的條件。也就是isAshow=true的時候，對號會對應顯示。

先把所有的isAshow的值變爲false，然後再單獨控制點擊的isAshow變爲true即可。如下：

<ul>
      <li v-for="(item,index) in sexAll" :key="index" @click="sexBtn(item)" class="flex-h">
        {{item.name}}
        <img src="../../assets/yesCheck.png" v-if="item.isAshow" />
      </li>
    </ul>


sexBtn(item) {
      this.sex = item.name;
      this.sexAll.forEach(ele => {
        ele.isAshow = false;
      });
      item.isAshow = true;
    },

關於動態綁定類名的方法

三元運算符動態綁定類名：

<i class="iconfont" :class="!inputChoose.cycle?'iconcheckbox':'iconcheckboxActive'"></i>

同時綁定多個類名：

 <i class="iconfont" :class="{'iconcheckbox':!item.checked,'iconcheckboxActive':item.checked}"
            ></i>

數組的形式綁定類名：

 <p :class="[isTrue, isFalse]">數組的形式(文字的顏色)</p>

<p :class="[{'p1': false}, isFalse]">數組中使用對象(文字的顏色)</p>

export default {
        data () {
           return {
               isTrue: 'p1',
               isFalse: 'p'
           }；
        }
}



<style scoped>
    .p1 {
        color: red;
        font-size: 30px;
    }
    .p {
        color: blue
    }
</style>