VUE v-if 和v-else-if页面加载出现闪现解决方法

vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下:

vue html代码块:

<div id="divApp">
    <div v-if="type === 'A'" v-cloak>
        A
    </div>
    <div v-else-if="type === 'B'" v-cloak>
        B
    </div>
    <div v-else-if="type === 'C'" v-cloak>
        C
    </div>
    <div v-else v-cloak>
        Not A/B/C
    </div>
</div>

vue js代码块:

var divApp = new Vue({
    el: '#divApp',
    data: {
        isActive: true,
        hasError: false,
        type: 'A'
    },
    // 在 `methods` 对象中定义方法
    methods: {
    }
})

css 代码:

[v-cloak] {
    display:none;
}

主要是添加样式[v-cloack],加到标签中。

Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统模板。在 Vue-element-admin 中,页面的刷新可以通过以下几种方式实现: 1. 使用 Vue Router 的 `beforeEach` 钩子函数:在路由切换之前,可以执行一些操作,比如刷新页面。可以在 `router/index.js` 文件中设置如下代码: ```javascript import router from './router' router.beforeEach((to, from, next) => { // 判断是否需要刷新页面 if (to.meta.refresh) { window.location.reload() } else { next() } }) ``` 然后在路由配置文件 `router/modules` 中,对需要刷新的页面进行标记: ```javascript const routes = [ { path: '/dashboard', component: Layout, children: [ { path: 'index', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard', refresh: true } // 设置 refresh 属性为 true } ] } ] ``` 2. 使用 `window.location.reload()` 方法:在需要刷新页面的地方,可以直接调用该方法进行页面刷新。例如,在某个按钮点击事件中: ```javascript methods: { handleRefresh() { window.location.reload() } } ``` 3. 使用 Vuex 进行状态管理:可以在 Vuex 的状态管理中定义一个变量,用来标记是否需要刷新页面。然后在对应的页面组件中监听该变量的变化,当变量为 `true` 时,执行刷新操作。 这些方法都可以实现页面的刷新效果,根据具体的需求选择合适的方式即可。希望对你有帮助!如果有更多问题,请继续提问。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值