如何在Vue中动态操作DOM并检测用户操作系统

Question

我正在尝试使用Vue中的用户代理来检测用户操作系统。我已经尝试了所有我知道的东西，例如使用document和getElementById，并且尝试使用ref，如下所示，但是我无法使其正常工作。欢迎任何帮助，谢谢。

<template>
<v-container>
  <v-container fluid d-flex justify-center align-center flex-xs-column class="grey lighten-3">
    <div class="d-flex justify-space-between align-center flex-xs-column">
      <div class="d-flex flex-column">
      HERE ---><h1 ref="downloadTitle">yep</h1> <----
      HERE ---><p ref="downloadDesc">nope</p> <----
      <!-- <h1 v-if="navigator.userAgent.includes('win') == true"> Download For Windows </h1>
      <h1 v-if="navigator.userAgent.includes('Linux') == true"> Download For Linux </h1>
      <h1 v-if="navigator.userAgent.includes('Android') == true || navigator.userAgent.includes('like Mac') == true"> Not Available For Download On This Device </h1> -->
      <v-btn dark min-width="100" max-width="20%" class="ma-auto">Download</v-btn>
      </div>
      <v-divider vertical></v-divider>
      <v-img src="https://gamepedia.cursecdn.com/minecraft_gamepedia/6/62/Dirt_JE2_BE1.png" max-height="10%" class="ma-8"></v-img>
    </div>
  </v-container>
  <v-divider class="grey"></v-divider>
  <v-container fluid d-flex justify-center class="mb-12">
    <div class="d-flex flex-column justify-center text-center">
      <h1 class="ma-4"> Download For Your Other Devices </h1>
      <div class="d-flex justify-space-around">
      <v-card min-width="40%" class="text-center d-inline-block">
        <v-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Windows_logo_-_2012.svg/1024px-Windows_logo_-_2012.svg.png" aspect-ratio="1" max-width="100" contain class="ma-auto mt-4"></v-img>
        <v-card-subtitle class="d-block text-wrap ma-auto">Download For Windows</v-card-subtitle>
        <v-card-actions>
          <v-btn dark class="ma-auto" href="">Download</v-btn>
        </v-card-actions>
      </v-card>
      <v-card min-width="40%" class="text-center d-inline-block">
        <v-img src="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_linux-512.png" aspect-ratio="1" max-width="100" contain class="ma-auto mt-4"></v-img>
        <v-card-subtitle class="d-block text-wrap text-center">Download For Linux</v-card-subtitle>
        <v-card-actions>
          <v-btn dark class="ma-auto" href="">Download</v-btn>
        </v-card-actions>
      </v-card>
      </div>
    </div>
  </v-container>
</v-container>

<script>
  export default {
        name: "Downloads",
        methods: {
          detectOS: function detectOS() {
            var name = "Unknown OS"; 
            var download;
            var desc;
            if (navigator.userAgent.includes("win") != -1)  {
                name = "Windows";
            }
            else if (navigator.userAgent.includes("Mac") != -1) {
                name = "Mac"; 
            }
            else if (navigator.userAgent.includes("Linux") != -1) {
                name = "Linux"; 
            }
            else if (navigator.userAgent.includes("Android") != -1) {
                name = "Android OS"; 
            }
            else if (navigator.userAgent.includes("like Mac") != -1)  {
                name = "iOS";
            }
            else {
                name;
            };
        },
        mounted() {
          detectOS();
          this.$ref.downloadTitle.innerHTML = download;
          this.downloadDesc.innerHTML = desc;
          alert("hey");
        }
      };
</script>

<script scoped></script>

我已经尝试将其全部装入并创建，但是没有任何效果。预先感谢！

Answer 1

当然，什么也不起作用，伙计，您的detectOS方法不会返回任何内容。

还有所有这些废话吗？

if (navigator.userAgent.includes("win") != -1)

此代码没有任何意义，也不是您获取操作系统名称的方式。您可以在this page

上了解如何操作

解决此问题后，请执行以下操作：

步骤1：

将所有属性移到data()。已安装的挂钩无法访问desc方法中的download，name和detectOS属性。

data () {
  return {
    desc: '',
    download: '',
    osName: 'Unknown OS'
  }
},
methods: {
...

步骤2：

确保您的detectOS方法正确获得了操作系统名称。记录name变量，并确保它仍然不等于“未知操作系统”

...
else {
 name;
};
console.log(name)

如果仍然等于“未知操作系统”，则表示您仍未正确获得操作系统名称。

步骤3：

更新osName属性，以便其他方法可以使用它。

data () {
  return {
    osName: 'Unknown OS'
  }
},
methods: {
  detectOS() {
     // Get the OS name
     ...

     // Update property
     this.osName = name
  }
}

Answer 2

像here

  data: {
    userAgent:"",
    userOs:""
    },
  mounted() {
    console.log('userAgent; ',navigator.userAgent);

    this.userAgent = navigator.userAgent || '';
    this.userOs = navigator.platform || '';

    let osType = this.userOs.toLowerCase();

    if(osName.includes('win')) alert('win');
    else if(osType.includes('mac')) alert('mac');
    else if(osType.includes('ios')) alert('ios');
    else if(osType.includes('android')) alert('android');
    else if(osType.includes('linux')) alert('linux');
    else  alert('unkown os');
    }