Question

我有这个非常基本的HTML：

<div id="app">
  <input type="number" @change="start=$event.target.value">
  <input type="number" @change="final=$event.target.value">
  <button v-bind:disabled="isButtonActive">Proceed</button>
  {{start}} -- {{final}} -- {{res}}
</div>

小vue.js代码：

new Vue({
  el: '#app',
  data: {
      start: 0,
      final: 0
  },
  computed: {
      res() {
        return this.start < this.final;
      }
  },
  methods: {
    isButtonActive() {
      return this.start < this.final;
    }
  }
})

现在问题：如果我把2放到第一个输入，12到第二个我得到 '2 -- 12' -- false，但为什么 - 2＆lt; 12？

如果我先将12输入第二个输入，然后输入第2个输入

'2 -- 12 -- true'

如果我改变2到45，我得到了 '45 -- 12 -- true'，哦

现在问题是真的＆＃39;或者＆＃39; false＆＃39;按钮永远不会激活。请帮忙。这是codepen link

Answer 1

因为Vue.config.productionTip = false new Vue({ el: '#app', data: { start: 0, final: 0 }, computed: { res() { console.log(typeof this.start, typeof this.final, this.start < this.final) console.log('[Use ParseInt]', parseInt(this.start) < parseInt(this.final)) return this.start < this.final; } }, methods: { isButtonActive() { return this.start < this.final; } } })的值是一个字符串而不是数字，您可以通过parseInt将字符串转换为数字。查看以下演示。

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <input type="number" @change="start=$event.target.value">
  <input type="number" @change="final=$event.target.value">
  <button v-bind:disabled="isButtonActive">Proceed</button>
  {{start}} -- {{final}} -- {{res}}
</div>

v-bind:disabled

您可以使用修饰符 = v-model.number然后您应isButtonActive()使用函数的结果（isButtonActive）而不是函数本身（{{ 1}}），或使用v-bind:disabled="res" 会更好。（the difference between computed properties and methods is that computed properties are cached based on their dependencies），您可以点击点击我按钮查看差异。

如下面演示：

Vue.config.productionTip = false
new Vue({
  el: '#app',
  data: {
      start: 0,
      final: 0,
      testText: 'You will see isButtonActive is invoked, but computed properties will not'
  },
  computed: {
      res() {
        console.log('computed=res', typeof this.start, typeof this.final)
        return this.start < this.final;
      }
  },
  methods: {
    isButtonActive() {
      console.log('isButtonActive', typeof this.start, typeof this.final)
      return this.start < this.final;
    },
    test: function () {
      this.testText += '!'
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <input type="number" v-model.number="start">
  <input type="number" v-model.number="final">
  <button v-bind:disabled="isButtonActive()">Proceed</button>
  <button v-bind:disabled="res">Proceed</button>
  {{start}} -- {{final}} -- {{res}}
  <hr>
  <button @click="test()">Click me!!!</button>
  <p>{{testText}}</p>
</div>

Answer 2

无需将字符串转换为数字。您可以简单地以数字形式获取值而无需对其进行转换：

$event.target.valueAsNumber

更多细节：https://stackoverflow.com/a/68177209/12247829

Vue.js @change和$ event.target.value问题

2 个答案: