uniapp 点击按钮时改变颜色，点击结束后恢复原颜色
1 <template> 2 <view class="container"> 3 <view class="listbox"> 4 <view class="sublistbox"> 5 <view class="box30"> 6 <text class="txt-fontsize14-gray">充值金额：</text> 7 </view> 8 <view class="box40"> 9 <input class="priceinput" type="text" value="" v-model="price"/> 10 </view> 11 <view class="box30"> 12 <text class="txt-fontsize14-gray">元</text> 13 </view> 14 </view> 15 <view class="pricelistbox" > 16 <view class="pricebox" v-for="(item,index) in priceList" :key="index" @tap="priceChange(index)"> 17 <view class="priceinerbox" :class="{active:item.isSelect}"> 18 <text class="txt-fontsize16">{{item.name}}</text> 19 </view> 20 21 </view> 22 </view> 23 </view> 24 </view> 25 </template> 26 <script> 27 export default { 28 data() { 29 return { 30 price: 0, 31 priceList:[{name:'+100',value:100,isSelect:false},{name:'+200',value:200,isSelect:false},{name:'+500',value:500,isSelect:false}, 32 {name:'+1000',value:1000,isSelect:false},{name:'+2000',value:2000,isSelect:false},{name:'清零',value:0,isSelect:false}] 33 } 34 }, 35 methods: { 36 priceChange(n) { 37 var p=this.price; 38 var _this=this; 39 _this.priceList[n].isSelect=true; 40 if(n==5){ 41 this.price=0; 42 } 43 else{ 44 this.price=p+this.priceList[n].value 45 } 46 setTimeout(function() { 47 _this.priceList[n].isSelect=false; 48 }, 300); 49 } 50 } 51 } 52 </script> 53 54 <style> 55 .pricelistbox{ 56 94%; 57 height: 20vh; 58 display: flex; 59 flex-direction: row; 60 flex-wrap: wrap; 61 justify-content: center; 62 align-items: center; 63 } 64 .pricebox{ 65 30%; 66 display: flex; 67 flex-direction: column; 68 justify-content: center; 69 align-items: center; 70 } 71 .priceinerbox{ 72 90%; 73 height: 7vh; 74 border: 2px solid #66CDAA; 75 border-radius: 10px; 76 display: flex; 77 flex-direction: column; 78 justify-content: center; 79 align-items: center; 80 } 81 .active{ 82 background-color: #66CDAA; 83 color: white; 84 } 85 </style>