使用 vue.js 的条件渲染

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 中不是必需的，通常您会将其设为计算的属性（"computed property" 是 Vue-specific，请参阅 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 的条件渲染

conditional rendering using vue.js

html

vue.js