Vue 计算属性,多个输入框的值相加,到一个输入框
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
}
}
},
}
亲测有效,直接拿去用就能实现。
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐

所有评论(0)