Question

空字符串和空字符串在我的代码中给我不同的结果：

<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之类的易于使用的库。

Answer 2

问题是:disabled需要true / false（IMO）。但是，您使用的短路评估通常返回最后评估的表达式（由于其为&&运算符）。

现在，可以是非布尔值。因此，我认为在您的表达式中，您实际上正在返回一个"null"（字符串），该值对于truthy可能是有效的:disabled值。换句话说等于true。

如果将表达式修改为以下条件，则可以得到所需的内容。

修改条件：

 !(phone && phone.length && phone.length >=10).

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

2 个答案: