Vue进阶：对象动态添加属性和值_vue给对象动态添加属性和值的实例
<template>
<div>
<button @click="addProperty">Add Property</button>
<div v-for="(value, key) in myObject" :key="key">
{{ key }}: {{ value }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
myObject: {
name: 'Vue.js',
type: 'JavaScript Framework'
}
}
},
methods: {
addProperty() {
// 动态添加属性和值
this.myObject['newProp'] = 'New Value';
}
}
}
</script>这段代码中，我们定义了一个Vue组件，其中包含一个myObject对象。我们还有一个按钮，当点击按钮时，会触发addProperty方法，该方法会向myObject动态添加一个新的属性和值。在模板部分，我们使用v-for指令遍历myObject对象的所有属性和值，并显示它们。
评论已关闭