Vue 计算属性,多个输入框的值相加,到一个输入框

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

        <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
            }
        }
        
    },
}

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 Vue 的动态组件和 v-for 指令来实现增加和删除多个输入框,并且可以通过 v-model 指令来获取输入框。 首先,在 Vue 实例中定义一个数组,用来存储输入框: ``` data() { return { inputs: [] } } ``` 然后,在模板中使用动态组件和 v-for 指令来创建多个输入框: ``` <template> <div> <component v-for="(input, index) in inputs" :key="index" :is="'input-' + index" v-model="inputs[index]" /> <button @click="addInput">Add Input</button> <button @click="removeInput">Remove Input</button> </div> </template> ``` 在上面的模板中,我们使用了组件的动态名称,每个输入框的名称都是 `input-0`, `input-1`, `input-2` 等等。在组件中,我们可以使用 `v-model` 指令来绑定输入框: ``` <template> <div> <input :value="value" @input="$emit('input', $event.target.value)" /> </div> </template> <script> export default { props: ['value'] } </script> ``` 在组件中,我们使用了 `props` 属性来接收输入框,并且在输入框发生变化时,使用 `$emit` 方法来更新输入框。 最后,在 Vue 实例中定义 `addInput` 和 `removeInput` 方法,来增加和删除输入框: ``` methods: { addInput() { this.inputs.push('') }, removeInput() { this.inputs.pop() } } ``` 在 `addInput` 方法中,我们向 `inputs` 数组中添加一个空字符串,这样就会增加一个输入框。在 `removeInput` 方法中,我们从 `inputs` 数组中删除一个元素,这样就会删除最后一个输入框。 这样,我们就完成了增加和删除多个输入框,并且可以通过 `inputs` 数组来获取输入框
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值