Привязка данных

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

Vue.js позволяет декларативным образом устанавливать привязку между элементами веб-страницы и данными объекта Vue. Есть различные формы привязки.

Интерполяция

Простейшую форму привязки представляет интерполяция строк. В этом случае значение, к которому выполняется привязка, заключается в двойные фигурные скобки:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <p>{{name}} - {{age}}</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:25}
    });
</script>
</body>
</html>

При рендеринге выражения со скобками {{}} будут заменяться соответствующими значениями:

Привязка и интерполяция в Vue.js

При этом в интерполяции могут использоваться любые валидные выражения JavaScript.

<div id="app">
    <p>{{age > 25?'Больше 25 лет':'25 лет или меньше' }}</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>

Привязка к атрибутам

Для привязки к атрибутам html-элементов предназначена директива v-bind:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <a v-bind:href="link">{{text}}</a>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {text: 'Google', link:'https://google.com'}
    });
</script>
</body>
</html>

Для привязки к атрибуту после v-bind через двоеточие указывается непосредственно сам атрибут, к которому надо выполнять привязку.

Привязка к атрибутам в Vue.js

Для привязки атрибутов также можно использовать сокращенную форму:

<a :href="link">{{text}}</a>

Однократная привязка

Если необходимо, чтобы значение было привязано к элементу html только один раз и впоследствии не изменялось, то применяется директива v-once:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <input type="text" v-on:input="setMessage" />
    <p v-once>{{message}}</p>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {message:'Hello'},
        methods: {
            setMessage: function(event){
                this.message = event.target.value;
            }
        }
    });
</script>
</body>
</html>

Привязка к html

Для привязки элемента к коду html применяется директива v-html:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <div v-html="message"></div>
    <div>{{message}}</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {message:'<h2>Hello</h2>'}
    });
</script>
</body>
</html>

С помощью директивы v-html привязываемое значение будет рассматриваться как код html. В то же время при простой интерполяции код html будет интерпретироваться как обычная строка:

Привязка html в Vue.js

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

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