亲测可用：VUE实现图标按钮单选效果

 图标显示参考：https://blog.csdn.net/weixin_42040328/article/details/106260267

目标：按钮带图标，实现单选功能。

注：我的图标用的是阿里图标。

 <div class="container">
     <div class="btn" v-for="(item,index) in info" :key = "index">
        <!-- 循环内容 -->
         <button class="btn_text"  :class="{ active:btn == index}" @click="checked(index)"> 
            <i class="iconfont" v-html="item.icon"></i>
          </button>

      </div>
</div>
<script>
export default {
    data() {
        return {
            info: [
                {
                    icon: '&#xe61f;'
                },
                {
                    icon: '&#xe60f;'
                }
            ],
            btn:0,
        }
    },
    methods :{
        checked(index){
            this.btn = index;
        }
    }
}
</script>
<style scoped>
.container{
  width: 95%;
}
 .btn{
    width: 20%;
    margin-left: 8px;
}
.btn_text{
    margin-top: 10px;
    background-color: white;
    border: 1px solid #C1C1C1;
    height: 40px;
    width: 100%;
    color: #202020;
    border-radius: 3px;
  }
.active{
    margin-top: 10px;
    background: #FDF0EF;
    border: 1px solid #3b9d21;
    height: 40px;
    width: 100%;
    color: #3b9d21;
    border-radius: 3px;
}
</style>

实现效果：

标题