javascript - Vue动态计算输入变化

Question

我想使用vue计算分享 yield 。我将当天的收盘金额减去开始金额。我无法在 Dom 上显示结果。

JSfiddle:https://jsfiddle.net/4bep87sf/

这是代码:

let app = new Vue({
el: '#app',
data: {
s: '',
e: '',
tot: '0'
},
watch: {
e: function(){
this.tot = (this.e + this.s);
return this.f;
}
});

Answer 1

使用 computed property :

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  data: () => ({
    s: 0,
    e: 0
  }),
  computed: {
    tot() {
      return Number(this.s) + Number(this.e);
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="s" type="number">
  <input v-model="e" type="number">
  <pre>{{s}} + {{e}} = {{tot}}</pre>
</div>

另请注意，如果您希望总和正确，则需要将值转换为 Number()。如果它们被解释为字符串 a + b = ab.