Question

我正在尝试根据用户是台式机还是移动设备来更改电子邮件字段的输入类型。

我添加了一种检测用户是否在移动设备上的方法

get isMobile() {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    return true;
  } else {
    return false;
  }
}

我试图在html文件中实现它，如下所示

<form-field :label="label">
  <span class="mandatory_field" v-if="required">*</span>
  <div v-if="!isMobile()">
   <desktop>
    <input v-bind:class="inputStyle"
      type="text"
      :id="id"
      :name="name"
      @input="$emit('input',$event.target.value)"
      :placeholder="placeholder"
      :value="value"
  />
    </desktop>
    </div>
    <div v-else>
      <mobile>
          <input v-bind:class="inputStyle"
          type="email"
          :id="id"
          :name="name"
          @input="$emit('input',$event.target.value)"
          :placeholder="placeholder"
          :value="value"
        />
      </mobile>
    </div>
  <p class="field_error">{{ error }}</p>
</form-field>

但这只是使电子邮件字段消失。

在Vue.js中实现此功能的正确方法是什么？

Answer 1

您已将isMobile定义为getter属性。在Vue中这不是必需的，通常您可以将其设置为计算属性（“计算属性”是Vue特定的，请参见docs）。

您也不会像方法那样调用，因为它不是方法，而是属性。

<div v-if="isMobile">Mobile</div>
<div v-else>Desktop</div>

computed: {
  isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  }
}

从技术上讲，它不必是计算属性，因为它不依赖于任何组件的数据，并且其值永远不会改变，因此您可以将其定义为普通数据属性：

data() {
  return {
    isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  }
}

使用vue.js进行条件渲染

1 个答案: