refs и управление html-элементами

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

С помощью параметра refs можно ссылаться на определенный html-элемент из шаблона и управлять им.

Например, определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <h2 ref="header">Hello world!</h2>
    <button v-on:click="change">Change</button>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
var vm1 = new Vue({
	el: "#app",
	methods:{
		change: function(){
			this.$refs.header.innerText = "Welcome to Vue.js";
		}
	}
});
</script>
</body>
</html>

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

<h2 ref="header">Hello world!</h2>

В методах объекта Vue можно обратиться к элементу по установленному ключу через объект $refs:

this.$refs.header.innerText = "Welcome to Vue.js";

С объектом, который представляет html-элемент, (в данном случае this.$refs.header) фактически можно также работать, как и со стандартныи объектами JavaScript, которые представляют html-элементы. То есть мы можем обратиться к его свойствам innerText или innerHTML. Хотя в реальности объект this.$refs.header будет представлять надстройку над объектом js, который собственно и представляет html-элемент. Но фактически через this.$refs.header мы сможем уравлять элементом h2 на веб-странице.

Параметр $refs во Vue.js

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

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