Vue如何清空对象


Posted in Vue.js onMarch 03, 2022

Vue清空对象

JS清空对象

使用字面量方法指向一个新的对象:

var obj = {
    name: 'Lee',
    age: 20
};
obj = {};
var obj = {
    name: 'Lee',
    age: 20
};
for(var key in obj){
    delete obj[key];
}

Vue清空对象

使用对象字面量,不推荐使用。

<div id="app">
    <button @click="deleteInfo">删除</button>
    姓名:{{ message.name }},
    年龄:{{ message.age }}
</div>
var app = new Vue({
    el: '#app',
    data: {
        message:{
            name:"Lee",
            age: 20
        }
    },
    methods:{
        deleteInfo:function(){
               this.message = {};
        }
    }
})

使用 Vue.delete:

<div id="app">
    <button @click="deleteInfo">删除</button>
    姓名:{{ message.name }},
    年龄:{{ message.age }}
</div>
var app = new Vue({
    el: '#app',
    data: {
        message:{
            name:"Lee",
            age: 20
        }
    },
    methods:{
        deleteInfo:function(){
            for(let key of Object.keys(this.message)){
                Vue.delete(this.message,key);
            }
        }
    }
})

某一个对象清空vule值,保留key

其中就是将一个对象的属性copy到另一个对象

在vue中

  • this.$data 获取当前状态下的data
  • this.$options.data() 获取该组件初始状态下的data

所以,下面就可以将初始状态的data复制到当前状态的data

实现重置效果:

Object.assign(this.$data, this.$options.data())

当然,如果你只想重置data中的某一个对象或者属性:(一般用于表单清空数据)

this.form = this.$options.data().form

某一个对象清空vule值,保留key

Object.keys(form).forEach((key) => (form[key] = ''))

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 #Vue.js
vue实现移动端div拖动效果
Mar 03 #Vue.js
vue实现滑动解锁功能
Vue全局事件总线你了解吗
Feb 24 #Vue.js
Vue的生命周期一起来看看
Vue的过滤器你真了解吗
Feb 24 #Vue.js
Vue监视数据的原理详解
Feb 24 #Vue.js
You might like
PHP操作XML作为数据库的类
2010/12/19 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php之Memcache学习笔记
2013/06/17 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
DOM 事件的深入浅出(一)
2016/12/05 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
Python __slots__的使用方法
2020/11/15 Python
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
化学教育专业自荐信
2014/07/04 职场文书
临床医学专业求职信
2014/08/08 职场文书
综合管理员岗位职责
2015/02/11 职场文书
毕业班工作总结
2015/08/10 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang