Este artículo es un tutorial detallado y más completo compilado por el editor en combinación con los documentos oficiales. Es muy adecuado para principiantes para aprender. ¡Los amigos interesados pueden echar un vistazo!
La información proviene del documento oficial:
http://cn.vuejs.org/guide/forms.html
Forma vinculante
① Métodos de unión comunes:
【1】 Enlace del cuadro de entrada de texto;
【2】 TextARea vinculante (similar a [1]);
【3】 El enlace de valor seleccionado por radio;
【4】 Binking de casilla de verificación (Amplios de paquete automáticamente, no se requiere nombre);
【5】 Seleccionar enlace;
【6】 Seleccione múltiples múltiples de enlace de selección de selección de enlace;
【7】 enlace dinámico (los tipos anteriores pero el mismo valor puede interactuar);
[8] La casilla de verificación seleccionada y sin control se les asignan diferentes valores (principalmente para el estado no marcado);
【9】 casilla de verificación, radio, seleccionar valores seleccionados se une dinámicamente (se refiere principalmente al objeto de enlace dinámico de valor o atributo de una instancia de VM, como un cierto atributo en datos, o un cierto valor de calculado);
Como código:
<div id = "app"> <input type = "text" v-model = "text"/> <div> {{text}} </div> <Div> "" ..... ... ... ..... .....lo. "" ..... ... .....lo. value = "FirstCheckbox" V-Model = "CheckBoxes"> FirstCheckbox </selabel> <br/> <label> <input type = "checkBox" value = "SecondCheckbox" V-Model = "CheckBoxes"> SecondCheckbox </seleting> <br/> <Label> <input type = "checkbox" value = "tortheckbox" V-model = "checkabeboxes"> tercio de checkeck. <Div> El valor seleccionado anterior es: {{casillas de verificación}} </div> <div> El valor seleccionado anteriormente es (se muestra en formato json, filtro json se usa aquí): {{casillas de verificación | json}} </div> <div> <div> "Valor de radio" " V-Model = "Radio"/> value = a </label> <br> <label> <input type = "radio" valor = "b" v-model = "radio"/> value = b </label> <br> <div> {{radio}} </div> <div> Tenga en cuenta que el valor de V-model aquí debería estar registrado en datos, de lo contrario habrá una advertencia Red (de hecho, todos deberían hacer lo que debería hacer lo mismo. <Viv> ".....-- ... ... ... ... No se registre aquí, se le informará a un error </div> <Div> "" ..... ... ... ... .....lo. value = "a"> a </opción> <opción valor = "b"> b </opción> <opción value = "c"> c </opción> <opción value = "d"> d </opción> <opción value = "e"> e </option> </select> <div> El valor seleccionado en la selección múltiple es: {{múltiples}}} </div> <div> nota que esta múltiplo seleccione el box. eje y </div> <Div> "" ..... ... ... ... .....lo. "" ..... ... ..... .....lo. <etiqueta> <input type = "checkBox" value = "b" v-model = "Dynamic"> b </label> <br/> <ettel> <input type = "checkbox" value = "c" v-model = "dinámico"> c </seleting> <br/> <select V-Model = "Dynamic" múltiplo> <valor = "A"> A </ppection> <opción = "B" b </opción " value = "c"> c </option> </select> <div> select es: {{dinámico}} </div> <div> ―–! v-bind: false-value = "diferente Values.f" V-Model = "Difference"> True/False </label> <br/> <iv> Valor diferente: {{diferente}} </div> <div> Nota que la anterior no puede usarse como una matriz como una variable para los modelos de cuadros de verificación múltiples como los controles ordinarios, y su valor es una propiedad cierta propiedad de la vínculo y VO VM; Por lo tanto, el valor en V es unir no puede ser una cadena, pero puede ser un objeto, como {a: 1} (por supuesto, el valor que se muestra en este momento también es un objeto) </div> <div> "" ".....ensa ... <Label> <input type = "radio" v-bind: value = "textarea" v-model = "personalize"/> value es 1 </label> <div> {{personalizar}} </div> <div> De manera similar, el valor puede ser una propiedad de VM o un objeto, y select también es válido. (Los tres principales se seleccionan. Además, aunque el tipo de fecha también se selecciona, no es muy significativo) </div> <div> "" ... ... ... ... ... El texto de múltiples líneas/n, // n es una nueva línea, pero se muestra como un espacio en la cadena ". CheckBoxes: [], radio:" ", seleccione:" ", múltiplo:" ", Dynamic: {}, diferente:" ", diferente Values: {T:" True ", F:" False "}, personalizar: ''}) </scrito>②Add Parámetros:
【1】 perezoso
El valor se actualiza solo después de que se cancele el estado de enfoque, en lugar de cuando se presiona la tecla.
Válido para los cuadros de entrada de texto y TextARea
Como código:
<input type = "text" V-Model = "Text" Lazy/> <Div> {{text}} </div>【2】 Número
Convierta automáticamente el valor de entrada al tipo de número, y si se convierte en tipo NAN, volverá al valor original;
Como código:
<input type = "text" v-model = "text" número/> <div> {{text}} </div> <div> {{typeof text}} </div>Si se agrega el número de parámetro, al ingresar un número, el tipo de solicitud es la cadena. Después de agregarlo, el número puro solicitará el tipo de número;
【3】 Debuncia = "milisegundos"
Cuando el valor no cambia para varios milisegundos seguidos, se activa el cambio del valor de la variable;
Como código:
<input type = "text" v-model = "text" debuncion = "1000"/> <div> {{text}} </div>Cuando ingreso los seis números 1, 2, 3, 4, 5, 6 en secuencia con una diferencia de tiempo de 500 ms, el valor del texto no se actualizará;
Cuando dejo de ingresar tiene 1000 ms, el valor de texto se actualizará;
Por lo tanto, es adecuado para operaciones de alto consumo como AJAX.
Lo anterior es el análisis de ejemplo de VueJS y ejemplos de elementos de forma introducidos por el editor para usted. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!