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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <p>{{name}} - {{age}}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { name: "Tom", age: 36 }
  }
}).mount("#app");
</script>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <p>{{age > 25?'Больше 25 лет':'25 лет или меньше' }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { name: "Tom", age: 36 }
  }
}).mount("#app");
</script>
</body>
</html>

Интерполяция выражений JavaScript в Vue 3

Также мы можем выводить значение, которое возвращает метод объекта Vue:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <p>{{ sayHi() }}</p>
	<p>12 часов: {{ welcome(15) }}</p>
	<p>22 часа: {{ welcome(22) }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { name: "Tom", age: 36 }
  },
  methods:{
	sayHi(){
		return `Привет, меня зовут ${this.name}`;
	},
	welcome(hour){
		
		if(hour > 21) return 'Доброй ночи.';
		else if(hour > 16) return 'Добрый вечер!';
		else if(hour > 11) return 'Добрый день';
		else return 'Доброе утро';
	}
  }
}).mount("#app");
</script>
</body>
</html>

В данном случае метод sayHi просто возвращает некоторую строку. А вот метод welcome принимает параметр и в зависимости от значения этого параметра возвращает определенное сообщение. Соответственно при интерполяции мы можем передавать в метод разные параметры, тем самым влияя на его результат.

v-text

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <div v-text="name"></div>
	<div v-text="age"></div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return { name: "Tom", age: 36 }
  }
}).mount('#app');
</script>
</body>
</html>

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

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

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

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

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

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

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

По умолчанию, если значение свойства меняется, то элементы визульного интерфейса обновляются и отображают обновленное значение. Но если необходимо, чтобы при изменении значения свойства элемент html отображал только первое значение свойства до его изменения, то применяется директива v-once:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <p v-once>{{message}}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return { message:'Hello'}
  }
}).mount('#app');
vueApp.message = "Good bye";
console.log(vueApp.message); // Good bye
</script>
</body>
</html>

В данном случае несмотря на изменение значения свойства message на веб-странице будет отображаться его старое значение - строка "Hello". Данная возможность может быть полезна, если нам необходимо выводить на веб-страницу изначальное значение до всех его изменений.

Привязка к html

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</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"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return { message:'<h2>Hello</h2>'}
  }
}).mount('#app');
</script>
</body>
</html>

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

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

Помощь сайту

Юмани:

410011174743222

Перевод на карту

Номер карты:

4048415020898850