How to implement the icon in vue? click on the icon and change it to another icon (radio only)

< html >

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/couponListPage.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="app-web">
        <header>
            <div class="top">
                <a href="-sharp"><img src="img/right.png" /></a>
                <div class="title">{{coupon}}</div>
            </div>
        </header>
        <div class="no_Coupon">
            <span class="left">{{nocoupon}}</span>
            <span class="right"></span>
        </div>
        <div class="content">
            <div class="top">
                <span class="left">{{coupon_left1}}<i>{{num}}</i>{{coupon_left2}}</span>
                <span class="right"><img src="img/_@1x.png"/><a v-bind:href="website">{{coupon_right1}}</a></span>
            </div>
            <ul>
                <li v-for="coupon in coupons">
                    <div class="Coupon_1" v-bind:class="compClasses" >
                        <div class="left">
                            <p class="left_top">{{coupon.price}}<span>{{unitPrice}}</span>
                            <p class="left_bottom">{{available}}
                        </div>
                        <div class="center">
                            <p class="center_1">{{universalCoupon}}
                            <p class="center_2">{{date}}
                            <p class="center_3">{{application}}
                                <img src="img/down.png" alt="" v-on:click="changeCoupon_1 = !changeCoupon_1"  />
                            
                            <div class="right">
                                <img src="img/png_1.png" />
                            </div>
                        </div>
                        
                    </div>
                    <div class="bottom"></div>
                </li>
            </ul>
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/couponListPage.js" type="text/javascript" charset="utf-8"></script>
</body>

< / html >

this is the vue.js code
var content = new Vue ({

el: ".app-web",
data: {
    coupon: "",
    nocoupon: "",
    coupon_left1: "",
    num: "4",
    coupon_left2: "",
    coupon_right1: "",
    website: "-sharp",
    unitPrice: "",
    available: "100",
    universalCoupon: "",
    date: "2018.06.07 - 2018.07.07",
    application: "",
coupons: [
        {price: "20"},
        {price: "50"},
        {price: "100"}
    ],
}

});

this is CSS style

html,
body,
div,
ul,
li,
dl,
dt,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
em,
b,
strong,
img,
input,
textarea,
select,
form {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

img {
    border: 0 none;
    vertical-align: top;
}

a {
    color: -sharp3d3d3d;
    text-decoration: none;
}

a:hover {
    color: -sharpf60;
}

input {
    border: none;
    outline: none;
}

.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: ".";
    visibility: hidden;
    clear: both;
    display: block;
    height: 0;
    font-size: 0;
}
html{
    font-size: 50px;
}
body {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 1.6rem;
    font-family: "";
    background: -sharpF1F2F6;
    font-size: 0.24rem;
    overflow-x: hidden;
}


/**/

header {
    padding-bottom: 0.4rem;
}

header .top {
    background-color: -sharp000000;
    width: 100%;
    height: 1rem;
    color: -sharpFFFFFF;
}

header .top img {
    float: left;
    padding-top: 0.2rem;
    padding-left: 0.2rem;
}
header .top .title{
    font-size: 0.5rem;
    line-height: 1rem;
    letter-spacing: 0.1rem;
    text-align: center;
}
.bottom {
    padding-bottom: 0.5rem;
}


/*no_Coupon*/

.no_Coupon {
    width: 100%;
    height: 0.9rem;
    background: -sharpFFFFFF;
}

.no_Coupon .left {
    font-size: 0.32rem;
    color: -sharp2f2f2f;
    line-height: 0.9rem;
    letter-spacing: 0.06rem;
    display: block;
    padding-left: 0.5rem;
}

.no_Coupon .right {
    float: right;
    margin: -0.6rem 0.2rem;
    background: url(../img/png_1.png)no-repeat;
    width: 0.44rem;
    height: 0.44rem;
}


/*.top*/

.content .top {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    letter-spacing:0.06rem;
    box-sizing: content-box;
}

.content .top .left {
    padding-left: 0.5rem;
}

.content .top .left i {
    font-style: normal;
    color: -sharpfd7290;
}

.content .top .right {
    float: right;
    padding-right: 0.4rem;
}

.content .top .right img {
    vertical-align: middle;
    padding-bottom: 0.04rem;
}

.content .top .right a {
    font-size: 0.28rem;
    color: -sharp0090ff;
    text-decoration: underline;
}


/*Coupon_1*/

.Coupon_1 {
    width: 100%;
    height: 1.8rem;
    background: url(../img/bj@2x.png)no-repeat center;
    background-size: 96% 100%;
    letter-spacing: 0.02rem;
}
.changeCoupon_1{
    height: 2rem;
}
.Coupon_1 .left {
    width: 29%;
    color: -sharpfd7290;
    text-align: center;
    padding: 0.2rem 0px 0 0.22rem;
    float: left;
}

.Coupon_1 .left span {
    font-size: 0.22rem;
}

.Coupon_1 .left .left_top {
    width: 100%;
    font-size: 0.6rem;
    padding-bottom: 0.08rem;
}

.Coupon_1 .left .left_bottom {
    width: 100%;
    font-size: 0.08rem;
}

.Coupon_1 .center {
    width: 68%;
    float: right;
    padding-top: 0.3rem;
}

.Coupon_1 .center .center_1 {
    font-size: 0.2rem;
    color: -sharp2f2f2f;
    padding-bottom: 0.1rem;
}

.Coupon_1 .center .center_2 {
    font-size: 0.2rem;
    color: -sharp9D9D9D;
    padding-bottom: 0.2rem;
}

.Coupon_1 .center .center_3 {
    font-size: 0.2rem;
    color: -sharp9D9D9D;
    padding-bottom: 0.3rem;
}

.Coupon_1 .center .center_3 img {
    vertical-align: middle;
}
.Coupon_1 .center .right{
    float: right;
    width: 3%;
    margin: -1.7rem 0.2rem;
}