Двусторонняя привязка

Последнее обновление: 27.07.2017

Ранее были рассмотрены примеры использования односторонней привязки с помощью интерполяции. Но кроме того, Vue.js поддерживает и двустороннюю привязку. Для создания подобной привязки используется директива v-model. Например:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <input type="text" v-model="name" /><br><br>
    <input type="text" v-model="name" />
    <p>Name: {{name}}</p>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {name: 'Tom', age:99}
    });
</script>
</body>
</html>

Здесь на странице определено два текстовых поля, и оба они привязаны к свойству name из объекта Vue. В этом случае нам не надо добавлять к текстовому полю обработчик события ввода, и в этом обработчике менять вручную значение свойства name. При изменении текста в одном из полей автоматически изменится значение в другом. То есть сработает двусторонняя привязка.

Двусторонняя привязка в Vue.js

Другой пример - определим программу вычисления факториала:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <input type="text" v-model="number" />
    <p>Факториал числа {{number}} равен {{factorial(number)}}</p>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {number:1},
        methods:{
            factorial: function(n){
                var result = 1;
                for(var i=1;i<=n;i++)
                    result *=i;
                return result;
            }
        }
    });
</script>
</body>
</html>

При вводе числа в текстовое поле функция factorial автоматически будет перевычислять значение.

Вычисление факториала и привязка в Vue.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850