返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何将对象中所有的key赋为空值
  • 398
分享到

vue如何将对象中所有的key赋为空值

2024-04-02 19:04:59 398人浏览 安东尼
摘要

目录将对象中所有的key赋为空值先来看看Object.assign的基本用法Vue空值报错问题将对象中所有的key赋为空值 Object.assign的使用,当然你也可以使用for去

将对象中所有的key赋为空值

Object.assign的使用,当然你也可以使用for去遍历 然后再一一去赋值为空字符串,推荐使用(Object.assign)

先来看看Object.assign的基本用法

Object.assign方法用于对象的合并,第一个参数(目标对象),可以有第二个,第三个参数,都是源对象,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

const target = {a:1};
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target) // {a:1, b:2, c:3}

注意:Object.assign方法的第一个参数是目标对象,后面的参数都是源对象

言归正传,有时候会碰到的需求是,有多个input框,每个input框都v-modei绑定了对应的value值,当点击重置按钮时,要清空所有input中的值,这时候可以用到Object.assign方法,具体怎么实现看代码

html代码

 <input type='text' v-model='valueData.value1'></input>
 <input type='text' v-model='valueData.value2'></input>
 <input type='text' v-model='valueData.value3'></input>
 <button @click=‘toReset'>重置(清空输入框)<button>

js 代码

const values = {
  value1:'',
  value2:'',
  value3:'',
}
data(){
 return {
   valueData:Object.assign({},values)
 }
},
methods:{
  //这时候如果你随意在输入框输入值,点击重置按钮 ,只需要重新给valueData复制 就能清空input中的值了
 toReset(){
 this.valueData = Object.assign({},values)
 }
}

vue空值报错问题

在这里插入图片描述

如上图所示,提示percent为空,WEB效果图如下

在这里插入图片描述

如果是自测阶段不想麻烦就直接在数据库添加数据就行或者或者初始化方法赋初始值,最简便的还是在vue template里进行判断

在这里插入图片描述

在这里插入图片描述

代码如下:

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何将对象中所有的key赋为空值

本文链接: https://lsjlt.com/news/145369.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue如何将对象中所有的key赋为空值
    目录将对象中所有的key赋为空值先来看看Object.assign的基本用法vue空值报错问题将对象中所有的key赋为空值 Object.assign的使用,当然你也可以使用for去...
    99+
    2024-04-02
  • vue怎么将对象中所有的key赋为空值
    这篇文章主要介绍“vue怎么将对象中所有的key赋为空值”,在日常操作中,相信很多人在vue怎么将对象中所有的key赋为空值问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue怎么将对象中所有的key赋为空值...
    99+
    2023-06-29
  • vue如何循环给对象赋值
    目录循环给对象赋值把已知数组循环赋值给另一数组循环给对象赋值 async submitForm() { var that = this that.allPe...
    99+
    2024-04-02
  • vue中如何将变量赋值
    在vue中给变量赋值的方法:1.新建common.vue文件,并定义变量;2.创建vue.js项目;3.使用import方法导入变量;4.执行代码赋值使用变量;具体步骤如下:首先,新建一个common.vue文件,并在文件中定义一个全局变量...
    99+
    2024-04-02
  • vue中对象的赋值Object.assign({},row)方式
    目录对象的赋值Object.assign({}, row)Object.assign()需要注意的一个小知识点对象的赋值Object.assign({}, row) 复制功能,想单独...
    99+
    2024-04-02
  • 读取redis中所有的key对应的值
    从 redis 获取所有键对应的值可以通过以下方法:keys 命令:返回与指定模式匹配的所有键的数组。scan 命令:迭代键集合,分批返回键值对,直到所有键被返回。 如何从 Redis...
    99+
    2024-04-19
    redis
  • mybatisresultmap如何为对象赋值的调用顺序
    目录resultmap 为对象赋值的调用顺序java bean定义如下部分mybatis映射文件如下createResultObject方法的代码如下使用resultMap时需注意的...
    99+
    2024-04-02
  • Vue中如何判断对象是否为空
    目录Vue判断对象是否为空方法一方法二Vue判断对象为空|cannot read property ‘xx‘ of undefined结构体如下解决方法v-f...
    99+
    2024-04-02
  • vue如何遍历data所有变量并赋值
    目录遍历data所有变量并赋值遍历data工具类遍历data所有变量并赋值 遍历data工具类 var _data_str = sessionStorage.getItem("SC...
    99+
    2024-04-02
  • java如何赋值给Null的对象
    在Java中,可以使用关键字"null"将一个对象赋值为null。例如:```javaObject obj = null;```在上...
    99+
    2023-08-24
    java
  • java中给实体对象属性的空值赋默认值
    目录给实体对象属性的空值赋默认值给实体类赋默认值通用方法给实体对象属性的空值赋默认值 private final String defaultStr = ""; private fi...
    99+
    2024-04-02
  • vue如何给数组添加新对象并赋值
    目录给数组添加新对象并赋值方法一方法二数组赋值踩过的坑及解决给数组添加新对象并赋值 方法一 适用于数组就只有一组 listData: [{name:"张三",age:18}], //...
    99+
    2024-04-02
  • js如何获取json对象的key值
    本篇内容主要讲解“js如何获取json对象的key值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“js如何获取json对象的key值”吧!JavaScript 对象是由键值对创建的,也不像数组,...
    99+
    2023-06-26
  • vue中对象的赋值Object.assign({}, row)方式是什么
    这篇文章主要介绍了vue中对象的赋值Object.assign({}, row)方式是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue中对象的赋值Object.assign({}, ...
    99+
    2023-06-29
  • vue $set如何实现给数组集合对象赋值
    本篇内容主要讲解“vue $set如何实现给数组集合对象赋值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue $set如何实现给数组集合对象赋值”吧!vue $set 数组集合对象赋值在vu...
    99+
    2023-06-20
  • Java反射机制,如何将一个实体类所有字段赋值为null
    目录将一个实体类所有字段赋值为null起因第一种方法第二种方法将实体类中的null属性置为““或者空值工具类测试类先创建需要的实体将一个实体类所有字段赋值为n...
    99+
    2024-04-02
  • js遍历json对象所有key及根据动态key获取值的示例分析
    这篇文章主要介绍js遍历json对象所有key及根据动态key获取值的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例如下:var obj = ...
    99+
    2024-04-02
  • bash中如何将变量赋值为换行符
    这篇文章主要为大家展示了“bash中如何将变量赋值为换行符”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“bash中如何将变量赋值为换行符”这篇文章吧。变量赋值为换行符在 bash 中,如果要把变...
    99+
    2023-06-09
  • 如何使用json对象转化为key,value的对象数组
    这篇文章主要介绍“如何使用json对象转化为key,value的对象数组”,在日常操作中,相信很多人在如何使用json对象转化为key,value的对象数组问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使...
    99+
    2023-07-02
  • js如何将数组中的所有值相加
    这篇文章给大家分享的是有关js如何将数组中的所有值相加的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。将数组中的所有值相加reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作