javascript - null 与空字符串，不同的结果 - Vue2

Question

Null 和空字符串在我的代码中给出了不同的结果:

<b-button :disabled="phone && phone.length < 9"></b-button>

phone变量设置为 null :

data () {
  return {
    phone: null
}

在这种情况下 phone等于 false，因此我的 && phone.length < 9据我了解，声明不会触发。

但是如果我设置 phone: '' (空字符串)，然后是我的 phone设置为 true并触发下一条语句 && phone.length < 9 .

此条件的目的是禁用按钮，如果 phone号码为空，或少于 9 位。

Answer 1

您可以使用计算属性轻松检查输入:

var app = new Vue({
  el: '#app',
  data: {
    phone: null,
    inputText: null
  },
  computed: {
    isDisabled() {
      return (this.phone ? this.phone.length < 9 : true)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <input type="text" v-model="phone" />
  <br /> phone: {{ phone }}
  <br /> isDisabled: {{ isDisabled }}
</div>

直接在按钮上使用计算属性:

<b-button :disabled="isDisabled"></b-button>

顺便说一句:如果您打算进行任何更高级的表单验证，可以使用易于使用的库，例如 VeeValidate .