En Vue, puede usar v-modella directiva para implementar el enlace de datos bidireccional, de modo que el valor del cuadro de entrada se sincronice con el atributo de datos del componente. Aquí hay un ejemplo simple
- Cree una instancia de Vue:
const app = new Vue({
el: '#app',
data: {
inputValue: ''
}
});
- Use la directiva ** en la página
v-model: **
<div id="app">
<input type="text" v-model="inputValue" />
<p>输入框的值：{
{
inputValue }}</p>
</div>
En este ejemplo, creamos una instancia de Vue y datadefinimos una inputValuevariable llamada en la propiedad. Luego, use la directiva en el HTML v-modelpara inputValuerealizar un enlace bidireccional con el valor del cuadro de entrada. Ahora, cuando el usuario escribe en el cuadro de entrada, inputValuese actualiza automáticamente y se muestra en <p>la etiqueta.