在vue-cli中寫一個數量加減
阿新 • • 發佈:2018-12-10
vue實現汽車購票的加減
需求:最少減到1,減到1時顏色變灰並且不讓再減,最大加到5,顏色變灰並且不再讓加,效果如下:
html程式碼:
<template> <div> <div class="zk-order"> <section class="quota">應付總額:<span style="color: rgb(80,173,241);">¥{{666*count}}</span></section> </div> <div class="zkculation"> <section> <div class="zkculation-left clear" style="border-bottom: 1px solid #E6E6E6;">實付票務<span class="zkculation-right">¥{{666*count}}/{{count}}人</span></div> </section> <section> <div class="zkculation-left clear">退款票務<span class="zkculation-right">¥{{666*count}}/{{count}}人</span></div> </section> <div class="number"> <ul> <li><div class="btn-left" @click="subtract()" :class="{ 'active1':style1 }">-減人</div></li> <li><span class="zk-input">{{count}}人</span></li> <li><div class="btn-right" @click="add()" :class="{ 'active2':style2 }">+加人</div></li> </ul> <p></p> </div> </div> </div> </template>
:class="{ ‘active2’:style2 }" 是指動態改變樣式
js程式碼:
<script> export default{ name:'demo', data(){ return{ count:1, style1:false, style2:false, showcone:false, } }, methods:{ add:function(count){ if(this.count>=5){ this.style2=true; this.showcone=true; this.count=5; }else { this.count++; this.style1=false } }, subtract:function(count){ if (this.count<=1){ this.style1=true; this.showcone=true; this.count=1; }else{ this.count=this.count-1; this.style2=false } } } } </script>
css程式碼:
<style scoped> .active1{color: rgb(173,173,173) !important;} .active2{color: rgb(173,173,173) !important;} .zk-order{width: 100%;padding: 20px;background: white;} .quota{font-size: 16px; color: black;margin-top: 15px;text-align: left;} section{width: 100%;font-size: 16px;color: black;} .zkculation{width: 100%;background: white;} .zkculation-left{text-align: left;padding: 20px 0 10px 0px;margin-left: 20px;} .zkculation-right{float: right;color: rgb(173,173,173);margin-right: 10px;} .clear:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} .number{display: inline-block;margin: 13px auto;} ul,li{list-style: none;} li{float: left;} .zk-input{text-align: center;height: 36px;width: 60px;border: 1px solid rgb(80,173,241);display: block;line-height: 36px;color: black} li>div{width: 120px;height: 36px;border: 1px solid rgb(80,173,241);line-height: 36px;} li>.btn-left{border-bottom-left-radius:5px ;border-top-left-radius:5px ;border-right: none;;font-size: 15px;color: rgb(80,173,241)} li>.btn-right{border-bottom-right-radius:5px ;border-top-right-radius:5px ;border-left: none;color: rgb(80,173,241);font-size:15px} </style>
整體程式碼:
<template>
<div>
<div class="zk-order">
<section class="quota">應付總額:<span style="color: rgb(80,173,241);">¥{{666*count}}</span></section>
</div>
<div class="zkculation">
<section>
<div class="zkculation-left clear" style="border-bottom: 1px solid #E6E6E6;">實付票務<span class="zkculation-right">¥{{666*count}}/{{count}}人</span></div>
</section>
<section>
<div class="zkculation-left clear">退款票務<span class="zkculation-right">¥{{666*count}}/{{count}}人</span></div>
</section>
<div class="number">
<ul>
<li><div class="btn-left" @click="subtract()" :class="{ 'active1':style1 }">-減人</div></li>
<li><span class="zk-input">{{count}}人</span></li>
<li><div class="btn-right" @click="add()" :class="{ 'active2':style2 }">+加人</div></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default{
data () {
return {
count: 1,
style1: false,
style2: false,
showcone: false
}
},
methods: {
add: function (count) {
if (this.count >= 5) {
this.style2 = true
this.showcone = true
this.count = 5
} else {
this.count++
this.style1 = false
}
},
subtract: function (count) {
if (this.count <= 1) {
this.style1 = true
this.showcone = true
this.count = 1
} else {
this.count = this.count - 1
this.style2 = false
}
}
}
}
</script>
<style scoped>
.active1{color: rgb(173,173,173) !important;}
.active2{color: rgb(173,173,173) !important;}
.zk-order{width: 100%;padding: 20px;background: white;}
.quota{font-size: 16px; color: black;margin-top: 15px;text-align: left;}
section{width: 100%;font-size: 16px;color: black;}
.zkculation{width: 100%;background: white;}
.zkculation-left{text-align: left;padding: 20px 0 10px 0px;margin-left: 20px;}
.zkculation-right{float: right;color: rgb(173,173,173);margin-right: 10px;}
.clear:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
.number{display: inline-block;margin: 13px auto;}
ul,li{list-style: none;}
li{float: left;}
.zk-input{text-align: center;height: 36px;width: 60px;border: 1px solid rgb(80,173,241);display: block;line-height: 36px;color: black}
li>div{width: 120px;height: 36px;border: 1px solid rgb(80,173,241);line-height: 36px;}
li>.btn-left{border-bottom-left-radius:5px ;border-top-left-radius:5px ;border-right: none;;font-size: 15px;color: rgb(80,173,241)}
li>.btn-right{border-bottom-right-radius:5px ;border-top-right-radius:5px ;border-left: none;color: rgb(80,173,241);font-size:15px}
</style>
以上就是這篇文章的全部內容