应用场景:计算工时,,,,,,,

        <div>
            a: <input type="text" v-model="a" @blur="timeaa(a, 'a')">
            a2: <input type="text" v-model="a2" @blur="timebb(a2, 'a2')">
            a3: <input type="text" v-model="a3" @blur="timecc(a3, 'a3')">
        </div>

        <br>

        <div>
            b:<input type="text" v-model="b" @blur="timeaa(b, 'b')">
            b2:<input type="text" v-model="b2" @blur="timebb(b2, 'b2')">
            b3: <input type="text" v-model="b3" @blur="timecc(b3, 'b3')">
        </div>

        <br>

        <div>
            c:<input type="text" v-model="c" @blur="timeaa(c, 'c')">
            c2: <input type="text" v-model="c2" @blur="timebb(c2, 'c2')">
            c3: <input type="text" v-model="c3" @blur="timecc(c3, 'c3')">
        </div>
        <div>
            总数:
            <input type="text" v-model="total">
        </div>
export default {
    data() {
        return {
            a: 0,
            a2: 0,
            a3: 0,
            b: 0,
            b2: 0,
            b3: 0,
            c: 0,
            c2: 0,
            c3: 0
        }
    },
    computed: {
        aa() {
            return Number(this.a) + Number(this.b) + Number(this.c)
        },
        bb() {
            return Number(this.a2) + Number(this.b2) + Number(this.c2)
        },
        cc() {
            return Number(this.a3) + Number(this.b3) + Number(this.c3)
        },
        total() {
            return Number(this.aa) + Number(this.bb) + Number(this.cc)
        }
    },
    created(){
        console.log(this.aa)
    },
    methods: {
        timeaa(val, type) {
            console.log('2222222', val)
            if(this.aa > 4){
                alert("上午总工作小时不能超过4小时!")
                if(type == "a") return this.a = 0
                if(type == "b") return this.b = 0
                if(type == "c") return this.c = 0
            }
        },
        timebb(val, type) {
            if(this.bb > 4){
                alert("下午总工作小时不能超过4小时!")
                if(type == "a2") return this.a2 = 0
                if(type == "b2") return this.b2 = 0
                if(type == "c2") return this.c2 = 0
            }
        },
        timecc(val, type) {
            if(this.cc > 8){
                alert("晚上总工作小时不能超过8小时!")
                if(type == "a3") return this.a3 = 0
                if(type == "b3") return this.b3 = 0
                if(type == "c3") return this.c3 = 0
            }
        }
        
    },
}

亲测有效,直接拿去用就能实现。

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐