vue computed 双向绑定在methods用法

最新推荐文章于 2024-01-30 10:12:09 发布

小白兔12345678

最新推荐文章于 2024-01-30 10:12:09 发布

阅读量153

点赞数

分类专栏：前端微信小程序 vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_58373910/article/details/134220112

版权

前端同时被 3 个专栏收录

10 篇文章 1 订阅

订阅专栏

微信小程序

7 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

输入消费金额自动监听折扣、优惠券,时时算出实付金额

<template>
    <input :disabled="disabled" v-model="value" @input="checkNum($event)"  maxlength="5" class="ipt" type="digit" title="￥" placeholder="请输入消费金额">
    //折扣金额
    <text class="sfprice" v-if="amtObj.zgAmt && ischecked">-￥{{amtObj.zgAmt}}</text>
    //实付金额
    <view>{{amtObj.realAmt}}</view>
</template>

data(){
    return{
        value:'',
        //一定定义json格式
        amtObj:{
			zgAmt:'',//折扣金额	    	
			realAmt:''//实付金额
			
		},
    }
},
computed:{
			//折扣
			zgCount:{
				get(){
					let toal = this.value && (this.value * 0.1).toFixed(2)
					return this.$set(this.amtObj,'zgAmt',toal) //一定用$set
				},
				set(val){
					this.$set(this.amtObj,'zgAmt',val)
				}
				 
			},
			//实付
			realCount:{
				get(){
					let payCardAmt = this.payCardAmt ? this.payCardAmt : 0
					let zgAmt = this.amtObj.zgAmt ? this.amtObj.zgAmt : 0
					let toal = this.value && (this.value - zgAmt - payCardAmt).toFixed(2)
					
					return this.$set(this.amtObj,'realAmt',toal)
				},
				set(val){
					this.$set(this.amtObj,'realAmt',val)
				}
				
			}
		},
methods:{

    onCheck(){
				this.ischecked = !this.ischecked
				if(this.ischecked){
					this.$set(this.amtObj,'zgAmt',this.zgCount) //计算属性computed里赋值
					
				}else{
					let toal = parseFloat(this.realCount *100) + parseFloat(this.zgCount *100) //计算属性computed里获取值
					this.realCount = (toal/100).toFixed(2) //计算属性computed里赋值
					this.$set(this.amtObj,'zgAmt','') //一定用$set
					
				}
				

			},
}