一个前端问题，求解答

This topic created in 2038 days ago, the information mentioned may be changed or developed.

有三个输入框，价格 /折扣率 /折后价

折后价=价格 x 折扣率，即输入价格和折扣率可以自动算出折后价。

重点来了，我想同时实现输入折后价，可以算出折扣率，也就是
折扣率=折后价 /价格，

这个应该怎么实现，使用 vuejs+elementui

扣率

折

输入

折扣

5 replies • 2021-04-07 17:44:44 +08:00

TMaize

Apr 7, 2021 via Android

vmodel 用计算属性，计算属性写 get set 去操作 data 里的临时数据就行了

Eyon

Apr 7, 2021

@TMaize 愿闻其详，或者你测试过确实可以用这种解决方案。

TMaize

Apr 7, 2021 via Android

你这是空手套代码呀
<template>
<div id="app">
<input type="text" v-model="a" />
<input type="text" v-model="b" />
<input type="text" v-model="c" />
</div>
</template>

<script>
export default {
data() {
return {
a: 0,
b: 0,
};
},
computed: {
c: {
get() {
return Number(this.a) + Number(this.b);
},
set(v) {
this.b = Number(v) - Number(this.a);
},
},
},
};
</script>

Eyon

Apr 7, 2021

@TMaize 大谢.....

一模一样的代码写出来了....只差一句

this.b = Number(v) -Number(this.a);

然后在这个时候 c 始终输入不进去，也删除不了原来计算的值，就以为不行了，所以才上来提问的。

完全是我想多了。。

Eyon

Apr 7, 2021

@TMaize

借自己楼再问一下：

如果有若干行相同的 input （当然值不同），计算属性就不能用了(原则上计算属性不能传参)，还有什么思路呢？