单个显示收藏没有收藏

<template>

    <div>


        <div  class="box">

            <img src="../assets/image/jiesuan_unchoose.png"
                 ref="collection" @click="collect()"
                 id="aa"
                 alt="">    
                     
        </div>
    </div>



</template>




<script>
 import ChooseImg from "@/assets/image/jiesuan_choose.png";
  import UnChooseImg from "@/assets/image/jiesuan_unchoose.png";
    export default {
        //循环数据，渲染到页面上

      
        data() {
            return {
                // star: 'books-6-2',	//样式
              status:true,
            }
        },

        methods: {
          collect(){
           
             if( this.$refs.collection.id=="aa"){
                 this.$refs.collection.src=ChooseImg;
                 this.$refs.collection.id="bb";
                 this.status=false;
                 console.log("收藏")
             }else{
                this.$refs.collection.src=UnChooseImg;
                this.$refs.collection.id="aa";
                this.status=true;
                console.log("没有收藏")
             }
          }
        
        }
    }



</script>



<style scoped>
    /* .ico_gou{
        background: url("../assets/image/flowerdetail_star.png");
        background-size: cover;
    }
    .ico_gou_on{
        background: url("../assets/image/flowershoplist_star.png");
        background-size: cover;
    } */

    .box{
        width: 100px;
        height: 100px;
        border:1px solid #ccc;
    }
</style>