时间戳

首页 > 解决方案 > 如何在 Vue.js 中让两个输入相互反应

javascript - 如何在 Vue.js 中让两个输入相互反应

问题描述

我正在构建一个工具来计算购买某些材料的成本。问题是有时用户会按质量或体积购买它。

我想要一种有两个活动输入（质量和体积）的方法，每个输入都会考虑材料密度自动更新。

我尝试了计算属性和观察者，但无法使其正常工作。

这是我想要的样子和我尝试过的 https://jsfiddle.net/yfuk958j/

  Mass = <input v-model.number="mass"> <br/> 
  Volume = <input v-model.number="volume"><br/>

  computed: {
    volume() {
      return this.mass * this.density
    },
    mass () { 
    return this.volume / this.density 
    }
   }

标签： javascriptvue.jsinputreactive-programming

解决方案

您只需要 2 个输入，每个输入都绑定到您的 vm 的一个属性。还有一个监视功能，可以在其他更改时更新其中任何一个：

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  data: {
    density: 1,
    mass: 1, 
    volume: 1,
    inputType: 'mass'
  },
  watch: {
    mass(val) {
      this.volume = val/this.density;
    },
    volume(val) {
      this.mass = val*this.density;
    },
    density(val) {
      this.volume = this.mass/val;
    }
  },
  methods: {
    round(val) {
      return Math.round(val * 1e3)/1e3
    }
  }
})
span {min-width: 100px; display: inline-block;}
input[type="range"] {width: 200px;}
input[type="number"] {width: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <span>Density:</span> <input v-model="density" type="range" min=".1" max="10" step="0.1">{{density}}g/cm<sup>3</sup>
  </div>
  <div>
    <div>
      <span>Mass:</span> <input v-model="mass" type="range" min="1" max="1e4" step="0.001">
      <input v-model="mass" type="number" min="1" step="0.1" max="1e4">g
      [Volume: {{round(volume)}}cm<sup>3</sup>]
    </div>
    <div>
      <span>Volume:</span> <input v-model="volume"  type="range" min="2" max="1e4" step="0.001">
      <input v-model="volume"  type="number" min="2" max="1e4" step="0.1">cm<sup>3</sup>
      [Mass: {{round(mass)}}g]
    </div>
  </div>
</div>

推荐阅读