vue还原data中数据-重置

已于 2022-03-07 16:33:27 修改
阅读量2.2k 收藏
点赞数
分类专栏： 前端 文章标签： webpack 前端 node.js
于 2020-12-17 17:11:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csstmg/article/details/111319931
版权 
      Object.assign(this.$data, this.$options.data())
      
      this.ruleForm = this.$options.data().ruleForm
	  this.$refs.ruleForm.resetFields();

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试

csstmg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue】三种方法重置vue组件的data数据
A_soulmate的博客
01-11 9384
我们在vue组件中经常遇到需要重置表单的场景，需要重置data中的对象
vue 出现data-v-xxx的原因及解决
10-15
主要介绍了vue 出现data-v-xxx的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-dataflow-editor-Vue2数据流图编辑器-Vue.js开发
05-27
vue-dataflow-editor嗨，您可以使用https://github.com/jagenjo/litegraph.js。 基于vue块。 @ghostiam的项目。 npm npm我@ krthr / vue-dataflo vue-dataflow-editor嘿，您可以使用https://github.com/jagenjo/litegraph.js。 基于vue块。 @ghostiam的项目。 npm npm i @ krthr / vue-dataflow-editor导入app.js上的库// // app.js或main.js，或主文件//在其中创建vue应用程序从“ vue”导入Vue； //其他导入会导入“ @ krthr / vue-dataflow-editor”； 导入“ @ krthr / vue-dataflow-editor / dist / vue-dataflow-editor.css”； const app = new Vue（{/ * ... * /}）;
vue 重置data数据，恢复成初始值
最新发布
m0_60559048的博客
05-10 159
场景：在同用一个组件，但不是同一个路由名和pash。
vue-data-board：Vue中的数据分析委员会
02-05
欢迎来到Vue-Data-Board :waving_hand: 数据分析委员会。 用Vue.js构建的神奇的DIY数据板工具。 用于企业数据分析的现成数据解决方案。 支持自定义数据板和数据报告。 :house: :sparkles: 演示版 通过拖放生成图形。 将图形添加到数据板。 通过拖放自定义数据板布局。 安装 npm install 文件 作者 :bust_in_silhouette: DongSuo < > ： :handshake: 贡献 欢迎提供文稿，问题和功能要求！ 随时检查。 表示支持 给一个 :star: 如果这个项目对您有帮助！ :memo: 执照 版权所有:copyright:2019 。 该项目是许可的。 该自述文件是使用 :red_heart: 通过
vue-data-loading-无限滚动和向下/向上加载数据的另一个组件。-Vue.js开发
05-27
vue-data-loading中文文档无限滚动和下拉/上拉以加载数据的另一个组件。 这是一个演示：HackNews安装npm install vue-data-loadi vue-data-loading中文文档另一个用于无限滚动和下拉/上载以加载数据的组件。 这是一个演示：HackNews Install npm install vue-data-loading --save用法首先导入：从'vue-data-loading'导入VueDataLoading注册为组件：组件：{VueDataLoading}，唯一要做的就是包装您的数据带有vue-data-loading标签。 项目：{{item}}
如何用模板字符串拼接一个对象作为函数的参数_干货 | 前端模板引擎知多少
weixin_39755873的博客
12-05 1132
前端框架日新月异，而其中的数据绑定已经作为一个框架最基础的功能。我们常常使用的单向绑定、双向绑定、事件绑定、样式绑定等，里面具体怎么实现，而当我们数据变动的时候又会触发怎样的底部流程呢？模板数据绑定数据绑定的过程其实不复杂：1. 解析语法生成AST。2. 根据AST结果生成DOM。3. 将数据绑定更新至模板。1.解析语法生成AST抽象语法树（Abstract Syntax Tree）也称为AST语...
VUE还原data()数据默认值
Slay__的博客
01-16 1411
所有的都还原 Object.assign(this.$data, this.$options.data()) 还原某个 Object.assign(this.$data.form, this.$options.data().form)
vue中重置data数据
Zxiuping的博客
06-20 336
vue中重置data数据
React组件
DingDing_Zhang的博客
09-17 2318
React组件 组件的三种写法 改变state值 v-if 和 v-for 的底层写法
Vue重置data数据
Xpy 的博客
04-22 340
因为vue实例会把data初始值存放到 this.$options.data 中，所以我们只需要将原始数据重新给 data 结构一下就可以了。 Object.assign(this.$data, this.$options.data());
vue data恢复初始化数据的实现方法
10-16
今天小编就为大家分享一篇vue data恢复初始化数据的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如何重置Vue中Data对象数据
Eiwen的技术生涯
09-05 400
有时候为了重置多个表单中的一些数据，使用重新加载页面显示又不友好，如果仅仅是为了重置页面的表单等数据，可以直接重置Vue中data对象：
vue实现的一个撤销和恢复功能
qq_42783273的博客
04-14 5811
使用vue实现得一个撤销和回退功能 有三个表格 添加不同得数据 在点击撤销时删除最后一条添加得数，在点击恢复删除的数据 <template> <div style="width:1000px;margin:0 auto"> <Button type="info" @click="handleOk">添加</Button> <Table :columns="columns" :data="datas"><
vue将data恢复到初始状态 && 重新渲染组件
qq_39025670的博客
03-31 3703
Object.assign(this.$data, this.$options.data()) // 初始化data 这里的 this.$options.data() 作为源对象， this.$data 作为目标对象。源对象覆盖并合并目标对象中的内容，即有则覆盖，无则添加。 ...
vue使用 Object.assign()巧妙重置data数据
夏天的博客
06-10 5637
vue 使用 Object.assign() 巧妙重置data数据
vue重置data数据
MJ2029的博客
07-27 434
1.获取当前下的数据data: this.$options.data() 2.获取组件初始状态的data: this.$options.data() 3.将当前下的data赋值给初始状态的data(利用Object.assign().方法来实现拷贝): Object.assign(this.$data, this.$options.data()) 4.重置某一个对象或者属性的方法: this.form = this.$options.data().form ...
vue data恢复初始化数据
A_one2010的博客
03-06 5579
在我们进行vue开发过程中，经常会保存一些页面，此时，我们在app.vue的配置如下， &lt;keep-alive&gt; &lt;router-view v-if="$route.meta.keepAlive"&gt;&lt;/router-view&gt; &lt;/keep-alive&gt; 以此来保存页面，那么在再次进入这些页面的时候，我们需要重置该页面的...
Vue 中怎么重置 data
麦呢头冷的博客
11-07 3095
在某些情况下，需要重新使用data中的数据，但是data中的数据已经被各种表单、变量等赋值，那么怎么重置data的值呢？ 那么此时我们有两种办法 1. 逐个赋值 ... data() { return { name: '', sex: '', desc: '' } } ... // 逐个赋值 this.name = '' this.sex = '' this.desc = '' 但这种方法只在对象数量少的时候可以用一下，一个一个去重新赋值比较麻烦,而且代码看起来也会比较乱.
vue中怎么使用china-area-data
08-14
在Vue中使用element-china-area-data插件可以通过以下步骤进行： 1. 首先，你需要在你的项目中安装element-china-area-data插件。你可以使用npm或者yarn来安装，例如：`npm install element-china-area-data`。 2. 在你的Vue组件中，你需要引入element-china-area-data插件。你可以在`<script>`标签中使用`import`语句来引入需要的数据，例如： ```javascript import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data' ``` 3. element-china-area-data插件提供了多种数据，你可以根据你的需要选择使用。比如，`provinceAndCityData`是省市二级联动数据（不带“全部”选项），`regionData`是省市区三级联动数据（不带“全部”选项），`provinceAndCityDataPlus`是省市区三级联动数据（带“全部”选项），`regionDataPlus`是省市区三级联动数据（带“全部”选项）等等。 4. 你可以在你的Vue组件中使用这些数据，例如： ```javascript console.log(provinceAndCityData) // 输出省市二级联动数据（不带“全部”选项） console.log(regionData) // 输出省市区三级联动数据（不带“全部”选项） ``` 5. 如果你需要根据区域码获取对应的汉字，你可以使用`CodeToText`对象，例如： ```javascript console.log(CodeToText['110000']) // 输出北京市 ``` 6. 如果你需要根据汉字获取对应的区域码，你可以使用`TextToCode`对象，例如： ```javascript console.log(TextToCode['北京市'].code) // 输出110000 console.log(TextToCode['北京市']['市辖区'].code) // 输出110100 console.log(TextToCode['北京市']['市辖区']['朝阳区'].code) // 输出110105 ``` 通过以上步骤，你就可以在Vue中使用element-china-area-data插件了。请注意，你需要根据你的具体需求选择使用合适的数据，并且在引入插件之前确保已经安装了该插件。希望对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3使用element-china-area-data报错Cannot find module ‘element-china-area-data‘ or its ...](https://blog.csdn.net/qq_41950190/article/details/129843250)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue3 使用 element-china-area-data 实现地区选择器](https://blog.csdn.net/weixin_52803316/article/details/130777979)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue element-china-area-data使用详解](https://blog.csdn.net/qq_39057641/article/details/126719398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值