账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue3 ref 的一个问题 ？
    21
    0
    环境：vue3 + vue-router4 目标功能：tab切换，实现 字体颜色 和 svg图标 切换。代码逻辑 描述：1, 通过提前设置好.router-link-active的字体颜色，实现字体颜色切换。2，定义响应式tabName，他的值是 router.currentRoute.value.name 当前激活的路有名称，根据tabName值的变化 来 实现 svg图标的切换。问题描述：每次刷新页面之后，都会出现，必须点击N次之后（N = tab.item.length）,router.currentRoute.value.name的值，才能正常返回当前active路由的name。在点击次数小于N的情况下，router.currentRoute.value.name的值总是上一个active路由的name。代码如下：<template> <footer class="main-footer" @click="changeTabIndex" @load="changeTabIndex"> <router-link to="home"> <n-icon class="tab-icon" v-show=" tabName !== 'Home' "> <HomeOutline /> </n-icon> <n-icon class="tab-icon" v-show=" tabName === 'Home' "> <Home /> </n-icon> <strong> 主页 </strong> </router-link> <router-link to="new"> <n-icon class="tab-icon" v-show=" tabName !== 'New' " > <BagHandleOutline /> </n-icon> <n-icon class="tab-icon" v-show=" tabName== 'New' " > <BagHandle /> </n-icon> <strong> 新品 </strong> </router-link> <router-link to="hot"> <n-icon class="tab-icon" v-show="tabName == 'Hot'"> <Bonfire /> </n-icon> <n-icon class="tab-icon" v-show="tabName != 'Hot'"> <BonfireOutline /> </n-icon> <strong> 热卖 </strong> </router-link> <router-link to="cart"> <n-icon class="tab-icon" v-show="tabName == 'Cart'"> <Cart /> </n-icon> <n-icon class="tab-icon" v-show="tabName != 'Cart'"> <CartOutline /> </n-icon> <strong> 购物车 </strong> </router-link> <router-link to="my"> <n-icon class="tab-icon" v-show="tabName == 'My'"> <Person /> </n-icon> <n-icon class="tab-icon" v-show="tabName != 'My'"> <PersonOutline /> </n-icon> <strong> 我的 </strong> </router-link> </footer></template><script setup lang="ts">import {ref,onMounted} from 'vue'import {NIcon} from 'naive-ui'import { Home, HomeOutline, BagHandle, BagHandleOutline, Bonfire, BonfireOutline, Cart, CartOutline, Person, PersonOutline } from '@vicons/ionicons5'import {useRouter} from 'vue-router'const tabName = ref('');const router = useRouter();let count = 0;onMounted(()=>{ tabName.value = String(router.currentRoute.value.name);});function changeTabIndex(){ console.log(`第${count++}次单击`); console.log('---', String(router.currentRoute.value.name)); tabName.value = String(router.currentRoute.value.name); console.log(tabName.value);};</script><style lang='scss' scoped>.main-footer-size{ height: $mainFooterHeight; box-sizing: border-box;}.main-footer{ @extend .main-footer-size; display: flex; flex-direction: row; justify-content: space-around; align-items: flex-end; width: 100vw; padding-bottom: 5px; background-color: $mainBgColor; a{ flex: 1; display: flex; flex-direction: column; align-items: center; height: $mainFooterHeight; color: $mainFontColor; strong{ font-size: 13px; line-height: 15px; height: 15px; } } .tab-icon{ flex: 1; font-size: 22px; margin-top: 5px; } .router-link-active{ color: $mainColor; }}</style>https://www.bilibili.com/vide...
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 朱颜未换 普通会员 1楼

      在 Vue.js 中，ref 是一个用于在视图元素上引用数据或组件的属性。它在 Vue.js 中用于管理组件的状态和引用数据，例如在计算属性、状态管理、循环引用等场景中使用。

      以下是一个简单的示例，展示如何在 Vue.js 组件中使用 ref：

      ```vue

      ```

      在这个示例中，我们定义了一个组件 MyComponent，它包含一个 ref 属性 myDiv。在 mounted 生命周期钩子中，我们获取 myDiv 对象，并将其赋值给组件的 myDiv 属性。然后，我们定义了一个 updateText 方法，当组件的 myDiv 属性的值发生更改时，该方法会更新 myDiv 的文本。

      在视图中，我们使用一个 v-if 标签来检查 myDiv 是否存在和有一个文本内容。当 myDiv 存在且有文本内容时，我们显示 "Hello, World!"。如果没有文本内容，视图不会显示 "Hello, World!"。

      注意：ref 属性的使用方式在 Vue 3 中有所不同。在 Vue 3 中，ref 可以直接使用组件的实例属性，例如：

      ```vue

      ```

      在这个示例中，我们不再使用 ref 的组件属性 myDiv，而是直接通过 this.$refs.myDiv 来引用组件实例的 myDivData 属性。这样，我们可以在视图中直接使用 myDivData.text 来更新文本内容。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部