new Vue({ data() { return { form: {name:''} } }, created() { this.form={ name: '小明', age: '18', gender:'', weight:108 } } })
时间: 2024-02-10 15:11:42 浏览: 19
这段代码创建了一个 Vue 实例,并定义了一个名为“form”的响应式对象。该对象包含一个名为“name”的属性,并将其初始化为空字符串。
在 Vue 实例的 created 钩子函数中,该响应式对象被重新赋值,其中“name”属性的值被设置为“小明”,并添加了其他属性“age”、“gender”和“weight”。
需要注意的是,在 created 钩子函数中重新赋值对象时,Vue 会将其转换为响应式对象,并将其添加到 Vue 实例中。因此,当对象中的属性值发生变化时,相关的组件部分会自动更新。
在此例中,当 Vue 实例被创建时,表单中的“name”属性会被初始化为空字符串。当 created 钩子函数被调用时,表单中的“name”属性会被重新赋值为“小明”,并添加了其他属性。这些属性可以在 Vue 组件中使用,例如:
```
<template>
<div>
<input v-model="form.name" type="text">
<input v-model="form.age" type="text">
<input v-model="form.gender" type="text">
<input v-model="form.weight" type="text">
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: ''
}
}
},
created() {
this.form = {
name: '小明',
age: '18',
gender: '',
weight: 108
}
}
}
</script>
```
在这个组件中,我们使用了 v-model 指令将表单中的数据绑定到组件的 data 对象中。当表单中的数据发生变化时,组件的 data 对象会自动更新,从而实现了数据的双向绑定。