当前位置: 首页 > news >正文

Vue 重置组件到初始状态

Vue 重置组件到初始状态

Vue


通过直接强制刷新 DOM 来达到重置组件的效果,这样可以重置一些组件的动画以及组件内初始的数据

强制重新生成 DOM 的实现

原理:强制重新生成 DOM 可以通过 Vue 中的 key 来实现。在 Vue 更新 Dom 时,如果 key 值相同则会对原有组件进行复用,如果不同,则会重新生成。

代码示例:

每次点击 refresh 按钮,Demo 组件都会重新生成

组件:

/**
 * Demo.vue
 */
<template>
  <div>Demo</div>
</template>
<script>
  export default {
    data () {
      return {}
    },
    created: function () {
      console.log('created')
    }
  }
</script>

主页面:

/**
 * Index.vue
 */
<template>
  <div>
  <Demo :key="id"></Demo>
  <button @click="refresh">refresh</button>
  </div>
</template>
<script>
  import Demo from './Demo'
  export default {
    data () {
      return {
        id: +new Date()
      }
    },
    methods: {
       refresh: function () {
        this.id = +new Date()
      }
    },
    components: {
      Demo
    }
  }
</script>

注:

+new Date() 的说明:
4 个结果一样,都是返回当前时间的毫秒数
alert(+new Date())
alert(+new Date)
var a=new Date()
alert(a.valueOf())
alert(a.getTime())

License

  • 可以拷贝、转发,但是必须提供原作者信息,同时也不能将本项目用于商业用途。

相关文章:

  • Vue 学习笔记 (三) -- VueCli 3 项目配置
  • Mint(Ubuntu)Linux终端中文显示乱码问题的解决
  • linux中Samba服务器配置
  • /etc/fstab和/etc/mtab的区别
  • c++模板实现抽象工厂
  • 1、工程构建、打包的一些经验
  • VI 你不知道的事
  • try{}----------catch{}的作用
  • Docker Compose 原理
  • SQLSERVER 里SELECT COUNT(1) 和SELECT COUNT(*)哪个性能好?
  • hfrk2410_a1.1开发板移植linux-2.6.32.27--网卡篇(cs8900)
  • VS2005相关----不能添加新项
  • nexus启动错报:1067 与jdk9相关
  • 谈谈VIP漂移那点破事
  • 程序员的几款利器
  • C# 免费离线人脸识别 2.0 Demo
  • Django 博客开发教程 16 - 统计文章阅读量
  • JavaScript的使用你知道几种?(上)
  • oschina
  • use Google search engine
  • windows下使用nginx调试简介
  • 翻译:Hystrix - How To Use
  • 给Prometheus造假数据的方法
  • !!【OpenCV学习】计算两幅图像的重叠区域
  • (2015)JS ES6 必知的十个 特性
  • (C语言)球球大作战
  • (二)【Jmeter】专栏实战项目靶场drupal部署
  • (分布式缓存)Redis哨兵
  • (附源码)计算机毕业设计SSM疫情下的学生出入管理系统
  • (简单有案例)前端实现主题切换、动态换肤的两种简单方式
  • (论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking
  • (一)RocketMQ初步认识
  • (原創) 如何將struct塞進vector? (C/C++) (STL)
  • (状压dp)uva 10817 Headmaster's Headache
  • **Java有哪些悲观锁的实现_乐观锁、悲观锁、Redis分布式锁和Zookeeper分布式锁的实现以及流程原理...
  • . ./ bash dash source 这五种执行shell脚本方式 区别
  • .NET CORE 第一节 创建基本的 asp.net core
  • .net的socket示例
  • .net反编译的九款神器
  • .NET微信公众号开发-2.0创建自定义菜单
  • [ CTF ] WriteUp- 2022年第三届“网鼎杯”网络安全大赛(白虎组)
  • [2019.2.28]BZOJ4033 [HAOI2015]树上染色
  • [2019.3.20]BZOJ4573 [Zjoi2016]大森林
  • [2019/05/17]解决springboot测试List接口时JSON传参异常
  • [8-27]正则表达式、扩展表达式以及相关实战
  • [BZOJ 3282] Tree 【LCT】
  • [C# 开发技巧]实现属于自己的截图工具
  • [C#]OpenCvSharp结合yolov8-face实现L2CS-Net眼睛注视方向估计或者人脸朝向估计
  • [emuch.net]MatrixComputations(7-12)
  • [Head First设计模式]策略模式
  • [IE编程] IE8 新增的C++开发接口
  • [Java、Android面试]_05_内存泄漏和内存溢出
  • [leetcode]56. Merge Intervals归并区间
  • [MicroPython]TPYBoard v102 CAN总线通信
  • [pasecactf_2019]flask_ssti proc ssti config