vue组件单选和全选。

我这是一个关注的页面，功能是单选和全选，然后去各自的取消。我用的不是input框，用的是阿里的icon图标。先开始把图标隐藏，然后点击的时候再出现，再次点击就消失。

<template>
    <div class="content">
        <div class="guan"><span>关注你感兴趣的人</span></div>
        <div class="box">
            <div class="zyun">
                <div class="zyun-z" @click="tap(i)" v-for="(item,i) in list" :key='item.i'>
                    <div class="z-a">
                        <i v-show="item.icon"  class="iconfont icon-duihao"></i>
                    </div>
                    <p>{{ item.name }}</p>
                    <p v-if="item.names==item.names">{{ item.names }}</p>
                    <p v-else></p>
                </div>
            </div>
            <div  @click="tap1()" class="guanzhu">{{ tie }}</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tie:'一键关注',
                ties:'一键取消',
                list:[
                    {
                        icon:false,
                        name:'我有一只猫',
                        names:'生活达人',
                    },
                    {
                        icon:false,
                        name:'momo家',
                        names:'穿搭能手',
                    },
                    {
                        icon:false,
                        name:'小汐姐',
                        names:'宝宝1岁3个月',
                    },
                    {
                        icon:false,
                        name:'我有一只猫',
                        names:'',
                    },
                    {
                        icon:false,
                        name:'momo家',
                        names:'',
                    },
                    {
                        icon:false,
                        name:'小汐姐',
                        names:'',
                    },
                    {
                        icon:false,
                        name:'我有一只猫',
                        names:'',
                    },
                    {
                        icon:false,
                        name:'momo家',
                        names:'',
                    },
                    {
                        icon:false,
                        name:'小汐姐',
                        names:'',
                    },
                    {
                        icon:false,
                        name:'我有一只猫',
                        names:'',
                    },
                    {
                        icon:false,
                        name:'momo家',
                        names:'',
                    },
                    {
                        icon:false,
                        name:'小汐姐',
                        names:'',
                    },
                ]
            };
        },
        methods:{
            tap(i){
                this.list[i].icon=!this.list[i].icon
            },
            tap1(){
                    // console.log(this.list)
                    var _this=this;
                for(var i=0;i<_this.list.length;i++){//重新遍历根据索引值来全选和取消
                        // console.log(_this.list[i].icon)
                        _this.list[i].icon=!_this.list[i].icon;
                }
            }
        }
    }
</script>

<style scoped>
.content{
        width: 100%;
    height: auto;
    overflow: auto;
        display: flex;
        flex-direction: column;
        flex: 1;
}

.box{
    width: 96%;
    box-sizing: border-box;
    padding: 0 0.625rem;
    background: #F8F8F8;
    margin: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}
.zyun{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
    box-sizing: border-box;
    padding:1.25rem ;
}
.zyun-z{
    background: #F8F8F8;
    width: 5rem;
    margin: 0.625rem 0;
}
.z-a{
width: 4.625rem;
height: 4.625rem;
background-color: rgba(217, 217, 217, 1);
border-radius:50% ;
}
.iconfont {
    float: right;
  color: #F7A226;
}
.zyun-z p{
    font-size: 0.75rem;
    color: #A6A4A4;
    text-align: center;
}
.guan{
    width: 100%;
    height: 1.875rem;
    display: flex;
    justify-content: center;
    margin: 0.9375rem 0;
}
.guan span{
    width: 7.5rem;
    text-align: center;
    line-height: 1.875rem;
    background: #F8F8F8;
    font-size: 0.875rem;
    color: #A4A2A2;
}
.guanzhu{
    width: 7.5rem;
    height: 1.875rem;
    text-align: center;
    line-height: 1.875rem;
    background: #D7D5D5;
    font-size: 0.875rem;
    color: #646464;
    border-radius:20% ;
    position: absolute;
    bottom: 1.25rem;
    left: 30%;
}
</style>