时间戳

首页 > 解决方案 > 使用 vue.js 进行条件渲染

html - 使用 vue.js 进行条件渲染

问题描述

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

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

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 中实现此功能的正确方法是什么？

标签： htmlvue.js

解决方案

您已定义isMobile为 getter 属性。这在 Vue 中不是必需的，通常您会将其设为计算属性（“计算属性”是 Vue 特定的，请参阅文档）。

此外，您不会将其称为方法，因为它不是方法，而是属性。

<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)
  }
}

推荐阅读