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的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python3.6的venv模块使用详解
2018/08/01 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
学校节水倡议书
2015/04/29 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python