Uso básico
Puede usar la Directiva V-Modelo para crear datos de datos bidireccionales en los elementos de control de formulario. Selecciona automáticamente el método correcto para actualizar el elemento de acuerdo con el tipo de control. Aunque un poco mágico, V-Model no es más que azúcar sintáctica, actualización de datos en eventos de entrada del usuario y manejar algunos ejemplos extremos en particular.
Texto
<span> El mensaje es: {{mensaje}} </span> <br> <input type = "text" v-model = "mensaje" placeholder = "editar Me">Caja
Casilla de verificación única, valor lógico:
<input type = "checkbox" id = "checkbox" v-model = "checked"> <etiqueta for = "checkbox"> {{checked}} </selt>Casillas de verificación múltiples, vinculadas a la misma matriz:
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" V-Model = "CheckedNames"> <Label for = "Mike"> Mike </label> <br> <span> Nombres checked: {{checkedNames | JSON}} </span> nuevo vue ({el: '...', datos: {checkedNames: []}})Radio
<input type = "radio" id = "un" valor = "un" v-model = "picked"> <etiqueta for = "one"> one </label> <br> <input type = "radio" id = "two" valor = "two" v-model = "picked"> <Label for = "two"> dos </label> <br> <span> Picked: {{{{{}}} </span> </span>Seleccionar
Elección única:
<Seleccione V-Model = "Seleccionado"> <Opción seleccionada> A </opción> <opción> b </ppection> <pection> c </option> </select> <span> seleccionado: {{seleccionado}} </span>Opción múltiple (BIND a una matriz):
<Seleccione V-Model = "Seleccionado" múltiplo> <opción seleccionada> A </opción> <opción> b </opción> <pection> c </opción> </select> <br> <span> Selected: {{Selected | JSON}} </span>Opciones dinámicas, renderizado con V-For:
<Seleccione V-Model = "Seleccionado"> <opción V-For = "Opción en Opciones" V-Bind: Value = "Option.Value"> {{opción nuevo vue ({el: '...', Data: {seleccionado: 'a', opciones: [{text: 'one', valor: 'a'}, {text: 'two', valor: 'b'}, {text: 'tres', valor: 'c'}]}})Valor de enlace
Para botones de radio, casillas de verificación y opciones de casillas, el valor vinculado por V-Modelo suele ser una cadena estática (un valor lógico para las casillas de verificación):
< valor = "ABC"> ABC </opción> </select>
Pero a veces queremos vincular el valor a una propiedad dinámica de la instancia VUE, que puede implementarse utilizando V., y el valor de esta propiedad puede no ser una cadena.
Caja
<input type = "checkbox" v-model = "toggle" v-bind: true-value = "a" v-bind: false-value = "b"> // cuando se selecciona vm.toggle === vm.a // cuando no se selecciona vm.toggle === Vm.b
Radio
<input type = "Radio" V-Model = "Pick" V-Bind: Value = "A"> // Cuando se selecciona vm.pick === VM.A
Seleccionar opciones
<Seleccionar V-Model = "Seleccionado"> <!-Object Literal-> <Opción V-Bind: Value = "{Número: 123}"> 123 </opción> </select> // Cuando se selecciona typeOf vm.selected //-> 'Object'Vm.Selected.number //-> 123Características de los parámetros
perezoso
Por defecto, V-Model sincroniza los valores y datos del cuadro de entrada en el evento de entrada. Puede agregar una función Lazy para sincronizar en el evento de cambio:
<!-Actualizar en "Cambiar" en lugar del evento "Entrada"->
<input v-model = "msg" perezoso>
número
Si desea convertir automáticamente la entrada del usuario al tipo de número (vuelva al valor original si el resultado de conversión del valor original es NAN), puede agregar un número de característica:
<Input v-Model = "Age" Número>
Debilitar
El desbloqueo establece un retraso mínimo, retrasando el valor del cuadro de entrada y los datos después de cada toque. Es útil si tiene que realizar operaciones de alto consumo cada actualización (como la solicitud AJAX en un mensaje de entrada).
<input v-Model = "Msg" Debuncia = "500">
Tenga en cuenta que el parámetro de debuncia no retrasa el evento de entrada: retrasa "escribir" los datos subyacentes. Por lo tanto, cuando se usa el debilidad, VM. $ Watch () debe usarse para responder a los cambios en los datos. Si desea retrasar el evento DOM, debe usar el filtro de debuncia.
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.