Основное использование
Вы можете использовать директиву V-модели для создания двустороннего привязки данных на элементах управления формой. Он автоматически выбирает правильный метод для обновления элемента в соответствии с типом управления. Несмотря на то, что V-модель немного волшебной, V-модель-не что иное, как синтаксический сахар, обновление данных в событиях пользовательских вводов и обработка некоторых экстремальных примеров, в частности.
Текст
<pan> Сообщение: {{message}} </span> <br> <input type = "text" v-model = "message" Placeholder = "Edit Me">Флажок
Одиночный флажок, логическое значение:
<input type = "fackbox" id = "fackbox" v-model = "cherced"> <label для = "fackbox"> {{chered}} </label>Несколько флажков, связанных с одним и тем же массивом:
<input type = "fackbox" id = "jack" value = "jack" v-model = "checkednames"> <label для = "jack"> jack </label> <input type = "fackbox" id = "john" value = "john" v-model = "ceckedNames"> <label для = "John"> John </label> <input type = "cheplece" id = "mike" mike "mike" mike "mike" mike "mike" mike "mike" mike "mike" mike "mike" mike "mike" mike "mike" mike "mike" mike "john" v-model = "checkedNames"> <метка для = "mike"> mike </label> <br> <pan> Проверенные имена: {{checkedNames | json}} </span> New Vue ({el: '...', data: {checkedNames: []}})Радио
<input type = "radio" id = "one" value = "one" v-model = "выбран"> <метка для = "one"> One </label> <br> <input type = "radio" id = "Two" value = "two" v-model = "picked"> <label for = "> Two </label> <br> <pan> picted: {{wicked at}}}}}}}}} <//spanВыбирать
Одиночный выбор:
<select v-model = "selected"> <опция выбранная> a </option> <опция> b </option> <опция> c </option> </select> <pan> выбран: {{selected}} </span>Множественный выбор (привязаться к массиву):
<select v-model = "selected" Multy> <опция выбранная> a </option> <опция> b </option> <опция> c </option> </select> <br> <pan> выбран: {{selected | json}} </span>Динамические параметры, рендеринг с v-for:
<SELECT v-Model = "SELECTED"> <опция v-for = "Опция в параметрах" v-bind: value = "option.value"> {{option.text}} </option> </selet> <pan> выбран: {{selected}} </span> New Vue ({el: '...', data: {selected: 'a', options: [{text: 'one', value: 'a'}, {text: 'two', value: 'b'}, {text: 'three', значение: 'c'}]}})Привязка значения
Для радиопроизводительных кнопок, флажок и параметров поле, значение, связанное с V-модели, обычно является статической строкой (логическое значение для флажок):
<!-При выборе, `picked`-это строка« a »-> <input type =" radio "v-model =" picted "value =" a "> <!-` toggle`-это правда или false-> <input type = "checkbox" v-model = "toggle"> <! value = "abc"> abc </option> </select>
Но иногда мы хотим связать значение с динамическим свойством экземпляра VUE, которое может быть реализовано с использованием V-BIND, и значение этого свойства не может быть строкой.
Флажок
<input type = "fackbox" v-model = "toggle" v-bind: true-value = "a" v-bind: false-value = "b"> // при выборе vm.toggle === vm.a // Когда не выбрано vm.toggle === vm.bb
Радио
<input type = "radio" v-model = "pick" v-bind: value = "a"> // при выборе vm.pick === vm.a
Выберите параметры
<select v-model = "selected"> <!-Literal Object-> <опция v-bind: value = "{number: 123}"> 123 </option> </select> // При выборе typeof vm.selected //-> 'object'vm.selected.number //-> 123Характеристики параметров
ленивый
По умолчанию V-модель синхронизирует значения ввода и данные в входном событии. Вы можете добавить функцию, лень, чтобы синхронизировать в событии изменения:
<!-Обновление в «Изменение» вместо события «Вход»->
<input v-model = "msg" ленивый>
число
Если вы хотите автоматически преобразовать ввод пользователя в тип номера (верните исходное значение, если результат преобразования исходного значения - NAN), вы можете добавить номер функции:
<input v-model = "возраст" число>
Дебайт
Debounce устанавливает минимальную задержку, задерживая значение ввода и данные после каждого TAP. Это полезно, если вам нужно выполнять высокопозиционные операции в каждом обновлении (например, запрос AJAX в приглашении ввода).
<input v-model = "msg" debounce = "500">
Обратите внимание, что параметр дебюра не задерживает событие ввода: оно задерживает «написание» базовых данных. Следовательно, при использовании Debounce Vm. $ Watch () следует использовать для реагирования на изменения в данных. Если вы хотите отложить событие DOM, вам следует использовать фильтр Debounce.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.