js删除对象中的属性，vue删除对象中的属性

最新推荐文章于 2024-09-21 10:10:56 发布

阿林阿林

最新推荐文章于 2024-09-21 10:10:56 发布

阅读量1.4k

点赞数 3

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_41793354/article/details/120779097

版权

最近在做一个批量上传的功能，我需要根据用户填的各个输入，去判断需要发送一个整理好的表单发给后台，也就是说我的对象中的全部属性都不是固定，而是动态的，我的思路其实是有两种的，一种是申明很多变量，然后根据用户需要合并到对象中发送给后台，第二种就是全在表单中申明那些变量，在发送给后台之前把不需要的属性删除就可以了，这样代码会整洁很多

不逼逼赖赖了，代码其实很少，就一行

我先说普通的删除方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<!-- 注意传入的形参是对象和需要删除的字段名 -->
		<button onclick="afterForm(obj,'name')">afterForm</button>
		<script type="text/javascript">
			var obj = {
				name: "阿林阿林",
				age: 23
			};
			// 修改之后的obj
			function afterForm(form, key) {
				delete form[key] //就这一行，是不是感觉很简单
				console.log(obj)
			};
		</script>
	</body>
</html>

修改之后的效果图：

[Violation] Parser was blocked due to document.write(<script>)

但是会出现了一个异步加载的警告，我还不知道怎么解决。好烦，解决了的兄弟们可以在评论区告诉一下我吗？

第二种方法（vue）：

也是一行代码，不会出现警告

<template>
  <div class="container">
    <el-button @click="afterForm">删除之后</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        obj: {
          name: '阿林阿林',
          age: 23
        }
      }
    },
    methods: {
      afterForm() {
        // 对象和需要删除的字段名
        this.$delete(this.obj, 'name')
        console.log(this.obj)
      }
    },
    created() {

    }
  };
</script>
<style scoped="scoped" lang="scss">
  .container {
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow-y: auto;
  }
</style>

也就一行代码，自己搭了一个脚手架写了个demo

// 对象和需要删除的字段名

this.$delete(this.obj, 'name')