Question

我是Vuejs的新手。我正在尝试在输入字段为空时禁用按钮。

我正在尝试：

<div>
    <input v-model="discount" type="text">
    <button v-bind:class="{ 'opacity-25': discount === '' }" v-bind:disabled="discount.length === 0">Apply</button>
</div>

<script>
new Vue({
    el: '#app',

    data () {
        return {
            discount: ''
        }
    }
}
</script>

注意：此输入不属于<div id="app">。

Answer 1

您可以简单地对数据属性使用单个否定符。

new Vue({
  el: '#app',
  data() {
    return {
      discount: ''
    }
  },
  methods: {
    btnClicked() {
      console.log(this.discount)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <input v-model="discount" type="text">
  <button v-bind:disabled="!discount" @click="btnClicked">Apply</button>
</div>

Answer 2

据我所知，您实际上只是在检查数据是否为假时，便在检查数据“折扣”的长度。

将按钮的html更改为以下

<button v-bind:class="{ 'opacity-25': discount === '' }" v-bind:disabled="!discount">Apply</button>

它也应该可以检查变量的长度，但是如果您只想检查变量是否具有值，则不必这样做。

当Vue.js输入为空时如何禁用按钮？

2 个答案: