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 26 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vuex的使用步骤
Jan 06 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
JS中的this变量的使用介绍
2013/10/21 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
Python使用django搭建web开发环境
2017/06/09 Python
预备党员转正思想汇报
2014/01/12 职场文书
简历中的自我评价范文
2014/02/05 职场文书
标准化管理实施方案
2014/02/25 职场文书
南京青奥会口号
2014/06/12 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2015年国庆节寄语
2015/08/17 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript