優惠券

{{coupon}}

{{nocoupon}}

{{coupon_left1}}{{num}}{{coupon_left2}}

{{coupon_right1}}

• {{coupon.price}}{{unitPrice}}

  {{available}}

  {{universalCoupon}}

  {{date}}

  {{application}}

這是vue.js代碼

var content = new Vue({

el: ".app-web",

data: {

coupon: '優惠券',

nocoupon: '不使用優惠券',

coupon_left1: '有',

num: '4',

coupon_left2: '張優惠券可用',

coupon_right1: '優惠券使用說明',

website: '#',

unitPrice: '元',

available: '滿100元可用',

universalCoupon: '全場通用券',

date: '2018.06.07 - 2018.07.07到期',

application: '此券應用去所有商品(特殊商品除外)',

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;

}

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的如何 更换vue的图标_vue如何实现图标点击选中后换一个图标（只单选）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。