Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим, как различными способами связывать данные и автоматически изменять входные данные.
Привязки значений
v-model связывают значения обычно как статические строки или логические значения для флажка.
Например, для флажка мы можем привязать его к строке следующим образом:
src/index.js :
new Vue({
el: "#app",
data: {
selected: undefined
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
foo
<input type="radio" v-model="selected" value="foo" />
<br />
bar
<input type="radio" v-model="selected" value="bar" />
<br />
<span>Selected: {{ selected }}</span>
</div>
<script src="src/index.js"></script>
</body>
</html>
Флажки привязаны к логическому значению:
<input type="checkbox" v-model="toggle">
Select привязываются к выбранной строке, установленной в атрибуте value:
<select v-model="selected"> <option value="foo">Foo</option> </select>
Флажок
Мы можем изменить истинное и ложное значение флажка с помощью атрибутов true-value и false-value следующим образом:
src/index.js :
new Vue({
el: "#app",
data: {
selected: undefined
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
Toggle
<input
type="checkbox"
v-model="selected"
true-value="yes"
false-value="no"
/>
<br />
<span>Selected: {{ selected }}</span>
</div>
<script src="src/index.js"></script>
</body>
</html>
Тогда мы получим yes, когда поставим флажок, и no в противном случае.
true-value и false-value не влияют на входной атрибут value, потому что браузеры не содержат снятые флажки при отправке форм.
Мы должны использовать радиовходы, чтобы гарантировать, что выбран хотя бы один элемент.
Радио-кнопки
Мы можем привязать атрибут value к выбранному значению с помощью v-bind:value.
Например, мы можем написать следующее:
src/index.js :
new Vue({
el: "#app",
data: {
pick: "",
foo: "foo",
bar: "bar"
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
Foo
<input type="radio" v-model="pick" v-bind:value="foo" />
<br />
Bar
<input type="radio" v-model="pick" v-bind:value="bar" />
<br />
<p>Selected: {{ pick }}</p>
</div>
<script src="src/index.js"></script>
</body>
</html>
Затем v-bind:value=”foo” отображается как value='foo', а v-bind:value=”bar” отображается как value='bar'.
Когда мы выбираем значение, мы получаем foo или bar в зависимости от того, какой переключатель выбран.
Выберите параметры
Мы можем привязать значение к объекту следующим образом:
src/index.js :
new Vue({
el: "#app",
data: {
selected: undefined
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option v-bind:value="{ number: 123 }">123</option>
<option v-bind:value="{ number: 456 }">456</option>
</select>
<br />
<p>Selected: {{ selected }}</p>
</div>
<script src="src/index.js"></script>
</body>
</html>
Затем мы получаем { number: 123 } или { number: 456 }, в зависимости от того, что выбрано.
Если мы хотим отобразить значение свойства number, мы должны написать следующее:
src/index.js :
new Vue({
el: "#app",
data: {
selected: {}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option v-bind:value="{ number: 123 }">123</option>
<option v-bind:value="{ number: 456 }">456</option>
</select>
<br />
<p>Selected: {{ selected.number }}</p>
</div>
<script src="src/index.js"></script>
</body>
</html>
Поскольку установка начального значения undefined приведет к ошибке и приложение не запустится.
Модификаторы
Vue поставляется с несколькими модификаторами для v-model.
.ленивый
Мы можем использовать v-model.lazy для синхронизации данных о change событиях, а не о input событиях. Это означает, что изменения синхронизируются только тогда, когда ввод не в фокусе.
Например, мы можем использовать его следующим образом:
src/index.js :
new Vue({
el: "#app",
data: {
msg: ""
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model.lazy="msg" />
<br />
<p>Value: {{ msg }}</p>
</div>
<script src="src/index.js"></script>
</body>
</html>
Когда мы перемещаем курсор за пределы ввода, мы получаем отображаемое значение ввода.
.количество
Модификатор number преобразует введенное в число. Это полезно, потому что ввод с type='number' по-прежнему возвращает строку.
Например, мы можем использовать его следующим образом:
src/index.js :
new Vue({
el: "#app",
data: {
age: 0
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model.number="age" type="number" />
<br />
<p>Age: {{ age }}</p>
</div>
<script src="src/index.js"></script>
</body>
</html>
.отделка
Мы можем автоматически обрезать пробелы с помощью модификатора .trim. Чтобы использовать его, мы можем написать следующее:
src/index.js :
new Vue({
el: "#app",
data: {
msg: ""
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model.trim="msg" type="text" />
<br />
<p>Value: "{{ msg }}"</p>
</div>
<script src="src/index.js"></script>
</body>
</html>
Затем, когда мы вводим что-то с пробелами в начале и в конце, они не отображаются.
So:
" a b c "
станет "a b c".
Заключение
Мы можем динамически привязываться к значениям с атрибутом v-bind:value. Это позволяет нам связывать атрибуты значений с примитивными значениями и объектами.
Кроме того, мы можем использовать различные модификаторы на v-model, чтобы автоматически изменять входное значение различными способами, например обрезать входные данные и преобразовывать их в числа.
