vue如何實現(xiàn)圖標點擊選中后換一個圖標（只單選）

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>優(yōu)惠券</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="#"><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>
                            <p class="left_bottom">{{available}}</p>
                        </div>
                        <div class="center">
                            <p class="center_1">{{universalCoupon}}</p>
                            <p class="center_2">{{date}}</p>
                            <p class="center_3">{{application}}
                                <img src="img/down.png" alt="" v-on:click="changeCoupon_1 = !changeCoupon_1"  />
                            </p>
                            <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>

點擊右邊的小圓點，點擊后會換成另外一張，只是顏色不一樣，這幾個小圓點只能單選，請問用什么方法

這是vue.js代碼
var content = new Vue({

el: ".app-web",
data: {
    coupon: '優(yōu)惠券',
    nocoupon: '不使用優(yōu)惠券',
    coupon_left1: '有',
    num: '4',
    coupon_left2: '張優(yōu)惠券可用',
    coupon_right1: '優(yōu)惠券使用說明',
    website: '#',
    unitPrice: '元',
    available: '滿100元可用',
    universalCoupon: '全場通用券',
    date: '2018.06.07 - 2018.07.07到期',
    application: '此券應(yīng)用去所有商品（特殊商品除外）',
coupons: [
        {price: '20'},
        {price: '50'},
        {price: '100'}
    ],
}

});

這是CSS樣式

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: #3d3d3d;
    text-decoration: none;
}

a:hover {
    color: #f60;
}

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: #F1F2F6;
    font-size: 0.24rem;
    overflow-x: hidden;
}


/*頭部*/

header {
    padding-bottom: 0.4rem;
}

header .top {
    background-color: #000000;
    width: 100%;
    height: 1rem;
    color: #FFFFFF;
}

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: #FFFFFF;
}

.no_Coupon .left {
    font-size: 0.32rem;
    color: #2f2f2f;
    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: #fd7290;
}

.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: #0090ff;
    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: #fd7290;
    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: #2f2f2f;
    padding-bottom: 0.1rem;
}

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

.Coupon_1 .center .center_3 {
    font-size: 0.2rem;
    color: #9D9D9D;
    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;
}

回答

編輯回答