前端开发攻略---如何用Vue实现实时网络状态监控：一篇让你轻松掌握前端网络连通性管理的指南

<template>
  <div>
    <p v-if="isOnline">在线</p>
    <p v-else>离线</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isOnline: navigator.onLine
    };
  },
  created() {
    window.addEventListener('online', this.handleOnline);
    window.addEventListener('offline', this.handleOffline);
  },
  destroyed() {
    window.removeEventListener('online', this.handleOnline);
    window.removeEventListener('offline', this.handleOffline);
  },
  methods: {
    handleOnline() {
      this.isOnline = true;
    },
    handleOffline() {
      this.isOnline = false;
    }
  }
};
</script>

这段代码使用Vue实现了一个简单的网络状态监控功能。它通过监听window对象的online和offline事件来更新组件的isOnline数据属性，并在模板中显示当前的网络状态。这是一个典型的使用Vue响应系统或应用状态变化的例子。