V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Eyon
V2EX  ›  问与答

一个前端问题,求解答

  •  
  •   Eyon · 2021-04-07 12:39:37 +08:00 · 922 次点击
    这是一个创建于 1087 天前的主题,其中的信息可能已经有所发展或是发生改变。
    有三个输入框,价格 /折扣率 /折后价

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

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

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

    5 条回复    2021-04-07 17:44:44 +08:00
    TMaize
        1
    TMaize  
       2021-04-07 12:48:27 +08:00 via Android
    vmodel 用计算属性,计算属性写 get set 去操作 data 里的临时数据就行了
    Eyon
        2
    Eyon  
    OP
       2021-04-07 12:52:40 +08:00
    @TMaize 愿闻其详,或者你测试过确实可以用这种解决方案。
    TMaize
        3
    TMaize  
       2021-04-07 13:06:16 +08:00 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
        4
    Eyon  
    OP
       2021-04-07 13:15:47 +08:00
    @TMaize 大谢.....

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

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

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

    完全是我想多了。。
    Eyon
        5
    Eyon  
    OP
       2021-04-07 17:44:44 +08:00
    @TMaize

    借自己楼再问一下:

    如果有若干行相同的 input (当然值不同),计算属性就不能用了(原则上计算属性不能传参),还有什么思路呢?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4127 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 05:25 · PVG 13:25 · LAX 22:25 · JFK 01:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.