Эта статья является подробным и более полным учебником, составленным редактором в сочетании с официальными документами. Это очень подходит для начинающих, чтобы учиться. Заинтересованные друзья могут посмотреть!
Информация поступает из официального документа:
http://cn.vuejs.org/guide/forms.html
Форма привязка
① Общие методы связывания:
【1】 Text Box Box привязка;
【2】 Textarea Привязка (аналогично [1]);
【3】 Связывание с выбранным радио;
【4】 Привязка флекса (автоматически связывает массивы, не требуется имя);
【5】 Выберите привязку;
【6】 Выберите флажок с несколькими выборами множественного выбора;
【7】 Динамическое связывание (вышеуказанные типы, но одно и то же значение может взаимодействовать);
[8] Флажок выбран и неконтролируемым присваивается различные значения (в основном для неверного состояния);
【9】 Флажок, радио, выберите выбранные значения Динамически связывание (в основном относится к объекту динамического привязки значения или атрибуту экземпляра VM, например, определенный атрибут в данных или определенное значение вычисленного);
Как код:
<div id = "app"> <input type = "text" v-model = "text"/> <div> {{text}} </div> <div> - - value = "firstCeckbox" v-model = "fackbox"> FirstCheckbox </label> <br/> <babel> <input type = "fackbox" value = "secondcheckbox" v-model = "флажки"> secondCheckbox </label> <br/> <label> <input type = "value =" thirdCheckbox " v-model = "fackbox"> ThirdCheckbox </label> <br/> <div> Выбранное значение выше: {{fackbox}} </div> <div> Здесь выбранное выше значение (отображается в формате json, здесь используется фильтр json): {{checkbox | json} </div> <div>- <div> {{radio}} </div> <div> Обратите внимание, что значение V-модели здесь должно быть зарегистрировано в данных, в противном случае будет красное предупреждение (на самом деле все должно делать то же самое) </div> <div> Значения устанавливается в b </option> <опция выбранного значения = "c"> выбор по умолчанию, значение установлено в c </option> </select> <div> {{select}} </div> <div> То же самое, если вы не зарегистрируете здесь, вы сообщите об ошибке </div> <Div> - value = "a"> a </option> <vition = "b"> b </option> <option value = "c"> c </option> <option value = "d"> d </option> <vatue value = "e"> e </option> </select> <div> Значение, выбранное в нескольких выборах: {{множественное}} </div> <div>. y-ось </div> <div> - - <bakel> <input type = "fackbox" value = "b" v-model = "dynamic"> b </label> <br/> <label> <input type = "fackbox" value = "c" v-model = "dynamic"> c </label> <br/> <select v-model = "Dynamic" Multy> vature = "aptain> aptaint> </ataint vaturion>" atainta> "atainta>" b " value = "c"> c </option> </select> <div> select IS: {{dynamic}} </div> <div> ― ^ - - {{{dynamic}} </div> <div> - v-bind: true-value = "disfulvalues.t" v-bind: false-value = "Различные данные. и экземпляр VM; therefore, the value in v-bind cannot be a string, but it can be an object, such as {a:1} (of course, the value displayed at this time is also an object) </div> <div>――――――――――――――</div> <div>Customized radio</div> <label><input type="radio" v-bind:value="text" v-model="customize"/> value is 1 </label> <backel> <input type = "radio" v-bind: value = "textARea" v-model = "cumpize"/> value 1 </label> <div> {{ravintize}} </div> <div> Аналогично, значение может быть свойством виртуальной машины или объектом, а также является верным. (Основные три выбраны. Кроме того, хотя тип даты также также выбран, это не очень значимо) Textarea: «Вот многострочный текст/n, // n-новая линия, но она отображается как пространство в строке».②add Параметры:
【1】 ленивый
Значение обновляется только после отмены состояния фокуса, а не при нажатии клавиши.
Действительно как для текстовых вводов, так и Textarea
Как код:
<input type = "text" v-model = "text" lazy/> <div> {{text}} </div>【2】 номер
Автоматически конвертировать входное значение в тип номера, и если он преобразован в тип NAN, оно вернется к исходному значению;
Как код:
<input type = "text" v-model = "text" number/> <div> {{text}} </div> <div> {{typeof text}} </div>Если номер параметра добавлен, то при входе в число тип подсказки - строка. После добавления, чистый номер заставит тип номера;
【3】 Debounce = ”Milliseconds»
Когда значение не изменяется в течение нескольких миллисекунд подряд, запускается изменение значения переменной;
Как код:
<input type = "text" v-model = "text" debounce = "1000"/> <div> {{text}} </div>Когда я введу шесть чисел 1, 2, 3, 4, 5, 6 в последовательности с разницей во времени 500 мс, значение текста не будет обновлено;
Когда я прекращаю вводить 1000 мс, текстовое значение будет обновлено;
Следовательно, он подходит для операций с высоким содержанием потребления, таких как Ajax.
Выше приведено примером анализа примеров Vuejs и форм элементов, представленных вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!