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 router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue里使用create, mounted调用方法
Apr 26 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创建PDF中文文档
2006/10/09 PHP
php缓存技术介绍
2006/11/25 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
jquery分页插件pagination使用教程
2018/10/23 jQuery
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python+django实现文件上传
2016/01/17 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python实现二叉查找树实例代码
2018/02/08 Python
python版飞机大战代码分享
2018/11/20 Python
python实现静态服务器
2019/09/05 Python
Python获取时间戳代码实例
2019/09/24 Python
python之随机数函数的实现示例
2020/12/30 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
商务英语专业毕业生自荐信
2013/11/05 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
运动会100米解说词
2014/01/23 职场文书
高中生操行评语
2014/04/25 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
暑期实践个人总结
2015/03/06 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers
Python matplotlib多个子图绘制整合
2022/04/13 Python