首页 > 其他分享 >Vue中不刷新页面,只刷新局部组件的方法

Vue中不刷新页面,只刷新局部组件的方法

时间:2024-02-07 23:45:05浏览次数:19  
标签:nextTick Vue show 刷新 组件 true 页面

第一步:组件后面加上v-if方法

<div id="app" ref="app">
  <router-view v-if="is_show"/>
</div>

第二步:data定义一个变量控制v-if

data() {
  return {
    is_show: true //定义一个变量控制v-if
  }

第三步:自定义刷新局部组件方法

reflash: async function () {
    this.is_show = false
    await this.$nextTick
    this.is_show = true
  }

this.$nextTick原理——确保 DOM 已经被更新


第四步:需要刷新时调用即可

//刷新组件
this.reflash();

标签:nextTick,Vue,show,刷新,组件,true,页面
From: https://www.cnblogs.com/wellplayed/p/18011491

相关文章

  • Vue中使用Echarts
    第一步:安装echarts模块cnpminstallecharts-S第二步:在main.js中全局引入importechartsfrom'echarts'Vue.prototype.$echarts=echarts//全局引入后面用this.$echarts就能直接使用了使用方式:template中<template><el-cardclass="box-card"style=&quo......
  • element UI vue脚手架 接入cdn
    vue.config.jsmodule.exports={configureWebpack:{externals:{'element-ui':'ELEMENT',vue:'Vue'}}//externals配置来告诉Webpack不要打包它。 index.html<!DOCTYPEhtml><htmllang="en&qu......
  • 如何实现Vuex本地存储
    在前端开发中,Vuex是一款非常强大的状态管理工具,但是默认情况下,Vuex的数据是存储在内存中的,刷新页面后数据将会丢失。这往往会导致用户在刷新页面后需要重新登录等繁琐的操作。本篇文章将教会您如何实现Vuex的本地存储,让您的应用程序能够在刷新页面后依然保持用户的状态和数据。一、......
  • vue 样式绑定
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>绑定样式</title><style>.basic{width:400px;height:100px;......
  • vue 监视 watch
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>天气案例_深度监视</title><!--引入Vue--><scripttype="text/javascript"src="../js/vue.js"......
  • VUE框架CLI组件调用天气接口实现天气界面动态实现和完整工程------VUE框架
    //这句话就等同于我们写的<scriptsrc="vue.js">//这就是在引入vueimportVuefrom'vue';//然后下一步是导入我们的根组件importAppfrom'./App.vue';//导入混入import{mix1}from'./mixin.js';import{mix2}from'./mixin.js';import......
  • vue 事件修饰符
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>事件修饰符</title><!--引入Vue--><scripttype="text/javascript"src="../js/vue.js"></script><style>*{mar......
  • Three.js 实现年会3D抽奖页面
    突然翻到在之前公司写的抽奖软件(用于公司年会)。觉得挺感慨的,TM的一共30+人,抽15左右,代码还是我写的,就是抽不中我。(真的是,涨了人品,失了智)一、效果效果如下:二、基础效果元素周期表 照片墙?抽奖?写之前的那段时间,刚好逛博客,看到别个大神写的threejs版《元素周期表》,这效果大体有......
  • Vue中对虚拟DOM的理解
    作为现代前端开发中的主流框架之一,Vue.js是一个非常流行的JavaScript框架,其核心概念之一就是虚拟DOM(VirtualDOM)。在本篇文章中,我们将深入探讨Vue中虚拟DOM的概念,并讨论为什么它在前端开发中如此重要。什么是虚拟DOM?在Vue.js中,虚拟DOM是一个独立于真实DOM的JavaScript对象。它的作......
  • 【nw.js】使用nw.js将html页面打包成exe免安装程序
    @[TOC]一、批处理zip命令(已有可跳过此步骤)下载zip,你可以到该网址下载zip执行文件,如下图:将文件路径配置到环境变量中,具体操作如下:右键计算机——>属性——>高级系统设置——>高级——>环境变量——>系统变量——>找到path,双击——>新建——>将所在路径添加进去(如:“F:\zip”包含进环......