时间戳

首页 > 解决方案 > 使用vuejs输入为空时如何禁用按钮？

vue.js - 使用vuejs输入为空时如何禁用按钮？

问题描述

我是 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">.

标签： vue.js

解决方案

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

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>

推荐阅读