Javascript Im使用v模型作为输入，使用名称作为另一个输入。我试图了解访问他们数据的不同方式

我有一个带有一些输入的表单，我提交表单并以一种模式显示数据。它可以工作，但我不确定我做的正确的方式和代码看起来混乱

这就是HTML的外观（为了简单起见，没有模式）：

为了缩短代码，我实现了v-model：

HTML：

let app = new Vue({
    el: '#app',
    data:{
        lastName: ''
    },
    methods:{
        getValues(submitEvent){
            this.lastName = submitEvent.target.elements.lastName.value
        }
    }
})

<div id="app">
  <form @submit.prevent="getValues">
    <label>First Name: </label><input type="text" v-model="firstName">
    <button>Submit</button>
  </form>
</div>

let app = new Vue({
    el: '#app',
    data:{
        firstName: ''
    },
    methods:{
        getValues(submitEvent){
            firstName = this.firstName
        }
    }
})

它也可以工作，但是我对这个名字感到困惑。我试着改变名字来理解参考资料，但没用。getValues中的变量firstName是否正在使用，或者该值是由于v-modal双向绑定而呈现的（我说不出来，因为只有提交表单后才会呈现该模式）

---

哪一个是正确的？它们可以互换吗？它们之间有什么区别？

一种方法是使用事件，另一种是使用双向绑定

提交表单时，关联事件触发一个方法（

@submit.prevent=“getValues”

）。在该方法中，您读取

name

的值，并将

lastName

属性设置为等于该值

执行

v-model=“firstName”

Vue时，会在输入字段值和

firstName

属性之间设置双向绑定

您可以看到不同之处，当您在输入框中键入时，它会立即更新属性。在幕后，Vue正在处理更改事件并更新属性。同样，如果以其他方式修改数据属性，则输入框中的值也会更新

---

还有第三个选项是“简单”绑定。这是通过使用

v-bind

标记实现的。这将以相同的方式更新数据属性，但如果在其他地方更改，则不会“反向”修改输入框值。

v-model=“firstName”

自动将输入绑定到您拥有的

数据

值（

This.firstName

）。Your

firstName=this.firstName

只是用该名称创建一个新的全局变量（全局变量，因为前面没有

var

或

const

或

let

）。现在，这没用。但是如果你想把它送到别的地方，为什么not@blex谢谢你的回复。所以，简而言之，如果我只想在模式中打印数据，那么这个函数就没有用了。例如：

let app = new Vue({
    el: '#app',
    data:{
        firstName: ''
    },
    methods:{
        getValues(submitEvent){
            firstName = this.firstName
        }
    }
})