Vue2.0 手动更新 Form 表单项值 - 详细教程

<template>
  <form>
    <label>姓名：</label>
    <input v-model='name' />
    <label>年龄：</label>
    <input v-model='age' />
    <button @click='submit'>提交</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    submit() {
      // 手动更新表单项的值
      this.name = '张三';
      this.age = 18;
      // 提交表单数据
      // ...
    }
  }
}
</script>
<p>在 Vue2.0 中，可以使用 <code>v-model</code> 指令将表单项与数据绑定。当需要手动更新表单项的值时，可以直接修改数据，表单项的值会自动更新。</p>
<p>如上示例，在 <code>submit</code> 方法中，我们手动将 <code>name</code> 属性设置为 '张三'，并将 <code>age</code> 属性设置为 18。由于 <code>name</code> 和 <code>age</code> 与表单项分别绑定，所以表单项的值会立即更新。</p>