vue3根据网络连接状态切换文字和图标不显示？

为什么我写了这个判断网络连接的没有显示在页面呀？控制台空白，没有报错但是也没有显示。
哪里出了错？需要怎么改呀？

          <div class="venue">
            <div class="box">
              <div class="state">
                <p>{{ isOnline ? '连接' : '断开' }}</p >
                <i :class="isOnline ? 'online-icon' : 'offline-icon'"></i>
              </div>

              <div class="pic">
                < img src="../assets/camera.jpg" alt="">
              </div>
              <div class="nowtime">
                <div class="time">
                  当前时间&nbsp:&nbsp<span v-html="datetime.nowTime"></span>
                </div>
              </div>
              <div class="smalltitle">
                <el-popover placement="bottom" width=" 150" trigger="hover" content="体育场-西北角"
                  :ref='popoverCode'>
                  <el-button class="v-title" slot="reference"
                    @click="visible = !visible">体育场...</el-button>
                </el-popover>
                <el-row class="smallbtn">
                  <el-button class="chg" @click="change" plain size="mini">修改</el-button>
                  <el-button class="cxl" @click="cancel" plain size="mini">删除</el-button>
                </el-row>
              </div>

            </div>
          </div>

<script setup lang="js">
  import Vue from 'vue'
  import { ref, reactive } from 'vue';
  export default {
    data: function () {
      return {
        datetime,
        popoverCode: '',
        visible: false,
        isOnline: true
      }

    },
    mounted() {
      window.addEventListener('online', this.updateNetworkStatus)
      window.addEventListener('offline', this.updateNetworkStatus)
    },

    methods: {
      // 修改按钮
      change() {
      },
      // 删除按钮
      cancel() {
      },
      updateNetworkStatus() {
        this.isOnline = navigator.onLine
      }
    }
  }

逻辑没问题，可以正常运行。
不过你这vue2、vue3结合的写法着实让人看不懂😂

把<script setup lang="js">改成<script>

【以下回答由 GPT 生成】

问题分析：

根据提供的代码，问题出在以下几个方面： 1. isOnline是一个变量，但在代码中没有给它赋初始值或者更新它的值； 2. datetime.nowTime是另一个变量，但在代码中也没有给它赋初始值或者更新它的值； 3. visible是另一个变量，但在代码中也没有给它赋初始值或者更新它的值； 4. v-html指令可能不正确； 5. 可能没有正确引入Vue相关的库。

解决方案：

1. 在Vue组件中，应该以data的方式声明isOnline，datetime和visible，并初始化它们的值。 js export default { data() { return { isOnline: false, // 初始化为false表示断开网络连接 datetime: { nowTime: '' }, // 初始化为一个包含nowTime属性的对象 visible: false, // 初始化为false表示不显示popover }; }, // ... }
2. 确保正确引入Vue和Vue相关的库，特别是Vue和vue-router。 ```js import Vue from 'vue'; import VueRouter from 'vue-router';

// 引入其他必要的库

Vue.use(VueRouter); // ... ```

1. 使用v-html指令来显示datetime.nowTime的值，确保该值在页面渲染之前已经被获取到。 ```html
   
   当前时间 : 

```

1. 确保el-popover和el-button的组件已经正确引入，并且el-popover的trigger设置为click。 ```html
   
   体育场...

   标题

   内容

```

综上所述，问题解决方案如下：

<div class="venue">
  <div class="box">
    <div class="state">
      <p>{{ isOnline ? '连接' : '断开' }}</p>
      <i :class="isOnline ? 'online-icon' : 'offline-icon'"></i>
    </div>

    <div class="pic">
      <img src="../assets/camera.jpg" alt="">
    </div>

    <div class="nowtime">
      <div class="time">
        当前时间&nbsp;:&nbsp;<span v-html="datetime.nowTime"></span>
      </div>
    </div>

    <div class="smalltitle">
      <el-popover placement="bottom" width="150" trigger="click" content="体育场-西北角" :ref="'popoverCode'">
        <el-button class="v-title" slot="reference" @click="visible = !visible">体育场...</el-button>
        <div class="popover-wrapper">
          <div class="popover-content">
            <h3>标题</h3>
            <p>内容</p>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</div>

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default {
  data() {
    return {
      isOnline: false, // 初始化为false表示断开网络连接
      datetime: { nowTime: '' }, // 初始化为一个包含nowTime属性的对象
      visible: false, // 初始化为false表示不显示popover
    };
  },
  // ...
}

希望以上解决方案对您有所帮助，如果还有其他问题，请随时提问。

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7511639
• 你也可以参考下这篇文章：Vue3基础看这一篇就够了（万字长篇，附实例代码及效果演示）
• 您还可以看一下 徐照兴老师的Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇课程中的 什么是单页面应用及实现前端路由的基本原理小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 【vue3】实现筛选页组件（深层嵌套循环数据切换）的封装和调用中的  二、筛选展示的数据结构如下（数据内容仅供参考） 部分也许能够解决你的问题。