vue 判断手机访问还是pc 访问

在Vue中，可以通过检查用户代理字符串来判断是手机访问还是PC访问。以下是一个简单的方法来实现这一功能：

<template>
  <div>
    <p v-if="isMobile">手机访问</p>
    <p v-else>PC访问</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isMobile: false
    };
  },
  created() {
    this.checkMobile();
  },
  methods: {
    checkMobile() {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
    }
  }
};
</script>

在这个例子中，我们在Vue实例的data对象中添加了一个isMobile属性，用来标识访问设备是手机还是PC。在created生命周期钩子中，我们调用了checkMobile方法来设置isMobile的值。checkMobile方法通过正则表达式检查用户代理字符串，以此判断当前设备是否是手机。如果是手机，isMobile将被设置为true，否则为false。在模板中，我们使用v-if和v-else指令来根据isMobile的值显示不同的内容。