vue点击添加的时候把一个对象包括对象里的值添加到这个数组里
可以使用Vue的数组方法push()来实现。首先需要定义一个空数组,然后在点击添加时,将要添加的对象使用push()方法添加到数组中。
示例代码如下:
<template>
<div>
<form>
<label>姓名:</label>
<input type="text" v-model="name">
<label>年龄:</label>
<input type="number" v-model="age">
<button type="button" @click="addPerson">添加</button>
</form>
<ul>
<li v-for="(person, index) in persons" :key="index">
{{ person.name }},{{ person.age }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
age: '',
persons: []
}
},
methods: {
addPerson() {
const person = {
name: this.name,
age: this.age
}
this.persons.push(person)
this.name = ''
this.age = ''
}
}
}
</script>
这个例子中,我们定义了一个空数组persons,然后在addPerson方法中创建一个包含输入框中姓名和年龄的对象person,并使用push()方法将其添加到persons数组中。最后将输入框中的值清空,以便下一次添加。在模板中,使用v-for指令遍历persons数组并渲染每个对象的值。
原文地址: https://www.cveoy.top/t/topic/bYCZ 著作权归作者所有。请勿转载和采集!