Js 如何为对象拓展一个动态属性
Js 如何为对象拓展一个动态属性
itclanCoder
发布于 2023-02-26 14:59:00
发布于 2023-02-26 14:59:00
前言
js对象的属性时可以随意拓展的，那么是否可以利用网页中输入的数据来动态指定属性的名字和值呢
当然是可以的,如何为一对象动态的添加一属性
具体示例
https://coder.itclan.cn/fontend/js/40-tuozhan-obj-attr/
1
原生js实现
具体代码如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>为对象拓展一个动态属性</title>
</head>
<body>
属性名:<input value="" type="text" id="text" /><br /><br />
属性值:<input value="" type="text2" /><br /><br />
<input type="button" value="拓展" onclick="handleTuoZhan()" />
<input value="展示其值" type="button" onclick="handleShow()" />
<script>
var obj = {}; // 目标对象
function handleTuoZhan() {
// 得到用户需要指定的属性的名字
var propName = document.getElementById("text").value;
// 得到具体的值
var propVal = document.getElementById("text2").value;
obj[propName] = propVal; // 修改属性的值
}
function handleShow() {
// 获取属性名
var propName = document.getElementById("text").value;
alert(obj[propName]);
}
</script>
</body>
</html>2
Vue版本实现
如下是vue版本实现
<template>
<div class="tuozhan-obj-wrap">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="属性名">
<el-input v-model="form.attrname"></el-input>
</el-form-item>
<el-form-item label="属性值">
<el-input v-model="form.attrval"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleTuoZhan">拓展</el-button>
<el-button type="success" @click="handleShow">展示其值</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
attrname: '',
attrval: ''
},
obj: {} // 目标对象
}
},
mounted() {
},
methods: {
// 拓展
handleTuoZhan() {
let propName = this.form.attrname;
let propVal = this.form.attrval;
obj[propName] = propVal;
},
handleShow() {
this.$message({
message: `我是新得到的值${this.obj}`,
type: 'success'
});
}
},
};
</script>
<style>
.tuozhan-obj-wrap {
text-align: center;
}
</style>分析
对象的属性可以通过.或中括号[]来访问,但如果要动态的指定属性,显然.是不行的,所以,本示例中使用[]来指定这个属性和它的值
因为[]中可以是一个动态的字符变量
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2023-01-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读