监听网络状态

<template>
	<div>
		
		<div class="tab">
			<div class="hd">
				<span v-bind:class="{cur:lanmu=='xinwen'}" v-on:click="change('xinwen')">新闻</span>
				<span v-bind:class="{cur:lanmu=='tupian'}" v-on:click="change('tupian')">图片</span>
				<span v-bind:class="{cur:lanmu=='junshi'}" v-on:click="change('junshi')">军事</span>
			</div>
			<div class="bd">
				<div class="xinwen">{{lanmu}}</div>
			</div>
		</div>		
	</div>
</template>
<script>
    export default {
		data() {
			 return {
				lanmu:"xinwen",
				onLine: navigator.onLine,
			 }
		},
		methods:{
			change:function(str){
				this.lanmu = str;	
			},
			updateOnlineStatus(e) {
				const { type } = e;
				this.onLine = type === 'online';
				console.log("网络由异常")
			},

        },
		mounted(){
			window.addEventListener('online',  this.updateOnlineStatus);// 网络由异常到正常时触发

			window.addEventListener('offline', this.updateOnlineStatus);// 网络由正常常到异常时触发
		}
	}
</script>
<style>
	.tab{
		width: 360px;
		height: 260px;
		border:1px solid #000;
		margin:100px auto;
	}
	.tab .hd{overflow: hidden;}
	.tab .hd span{
		float: left;
		width: 120px;
		height: 40px;
		line-height: 40px;
		background-color:#ccc;
		text-align: center;
	}
	.tab .hd span.cur{
		background-color: orange;
	}
       
</style>